我正在使用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/