css - translatex 获取左值和上值

Question

我正在使用 css 属性 translateX 将 Sprite 围绕某个点旋转 360 度。 Sprite 按预期围绕该点旋转，但我想知道如何在 Sprite 旋转时获得“左”和“顶”值。使用 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