Question

我正在使用css属性translateX将精灵旋转360度绕某一点。精灵按照预期在点周围旋转，但我想知道如何获得“左”和“左”。和＆＃39; top＆＃39;精灵旋转时的值。使用translateX是正确的方法还是有更好的解决方案？

#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); }
}

Answer 1

刚刚在jquery中发现了一个名为position（）的函数来获取左侧和顶部位置。适合我。想要分享这个以防其他人处于这种情况。

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

translatex获取左侧和顶部值

1 个答案: