Clever Geek Handbook

Translatex to get left and top values

I am working on rotating a sprite 360 ​​degrees around a specific point using the css translateX property. The sprite rotates around the point as expected, but I like to know how I can get the "left" and "top" values ​​while the sprite is rotating. Is using translateX the correct way to do this or is there a much better solution?

#target {
    position: absolute;

    top: 292px;
    left: 291px;


    -webkit-animation: orbit 4s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: orbit 4s linear infinite; /* Firefox 5-15 */
         -o-animation: orbit 4s linear infinite; /* Opera 12+ */
            animation: orbit 4s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}


@-webkit-keyframes orbit {
    from {  -webkit-transform: rotate(0deg) translateX(235px) rotate(0deg); }
    to   {  -webkit-transform: rotate(360deg) translateX(235px) rotate(-360deg); }
}

@-moz-keyframes orbit {
    from {  -moz-transform: rotate(0deg) translateX(235px) rotate(0deg); }
    to   {  -moz-transform: rotate(360deg) translateX(235px) rotate(-360deg); }
}

@-o-keyframes orbit {
    from {  -o-transform: rotate(0deg) translateX(235px) rotate(0deg); }
    to   {  -o-transform: rotate(360deg) translateX(235px) rotate(-360deg); }
}

@keyframes orbit {
    from {  transform: rotate(0deg) translateX(235px) rotate(0deg); }
    to   {  transform: rotate(360deg) translateX(235px) rotate(-360deg); }
}
+3


source to share


1 answer


Just opened up a function called position () in jquery to get the left and top positions. Works for me. Would like to share this in case anyone else is in this situation.



$("#myDIV").position().left
$("#myDIV").position().top
0


source






More articles:


All Articles