我正在使用css属性translateX围绕特定点旋转精灵360度。小精灵会像预期的那样围绕该点旋转,但是我想知道如何在小精灵旋转时获取“left”和“top”值。使用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); }
}

最佳答案

刚刚在jquery中发现了一个名为position()的函数,以获取左侧和顶部位置。为我工作。想要在其他人处于这种情况下分享此信息。

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

关于css - 转换以获得左值和顶值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30168473/

10-09 14:29