使用javascript在css3中获取@keyframe当前值

请参阅此处的演示： http ： //jsfiddle.net/hamidrezabstn/fgcPa/5/

当我点击中间的雨滴时，我希望它旋转到旋转圆圈的当前位置！ 我尝试下面的JS代码，但它不起作用！ 接下来我要做的是用旋转圆圈旋转雨滴！

$(function() { $('#center').click(function() { var pos = $('#circle').css('transform') $(this).css('transform', 'pos') }); }); 

Answer 1

编辑：我说在动画中获取变换的当前状态是不可能的，但我错了。 对于那个很抱歉 ！

要做任何你想做的事，你不需要真正得到它; 只是使用它。

我稍微改变了你的HTML，把雨滴放在旋转的div中。

然后，用这个CSS：

 .raindrop { background:center blue; width:50px; height:50px; border-radius: 100%; border-top-left-radius: 0; position: absolute; margin: auto; left: 75px; top: 75px; animation: ccircle 5s infinite linear; -webkit-animation: ccircle 5s infinite linear; } .raindrop:hover { animation: none; -webkit-animation: none; } .axis { width: 200px; height: 200px; transform: scaleX(2); background-color: none; border: 1px solid black; left: 50px; position: absolute; top: 50px; border-radius: 50%; } .rotate { width: 100%; height: 100%; top: 0px; animation: circle 5s infinite linear; -webkit-animation: circle 5s infinite linear; transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; position: absolute; } .counterrotate { width: 50px; height: 50px; animation: ccircle 5s infinite linear; -webkit-animation: ccircle 5s infinite linear; } .planet { width: 50px; height: 50px; position: absolute; border-radius : 50px; left: 0px; top: 0px; background-color: red; display: block; } @keyframes circle { from { transform: rotateZ(0deg) } to { transform: rotateZ(360deg) } } @-webkit-keyframes circle { 0% { -webkit-transform: rotateZ(0deg) } 100% { -webkit-transform: rotateZ(360deg) } } @keyframes ccircle { from { transform: rotateZ(360deg) } to { transform: rotateZ(0deg) } } @-webkit-keyframes ccircle { from { -webkit-transform: rotateZ(360deg) } to { -webkit-transform: rotateZ(0deg) } } 

你有这个小提琴

在其中，雨滴总是与轴div一起旋转。 但它也是反向旋转的，所以看起来是静态的。

当您将鼠标hover时，计数旋转将被禁用，并指向红色圆圈。 只要你徘徊它就会继续这样做。

要通过单击执行此操作，只需将：hover属性关联到类，然后在单击中设置此类。

Answer 2

  $(function() { $('#center').click(function() { var obj, matrix; obj = document.getElementById('circle'); matrix = getComputedStyle(obj).getPropertyValue('transform'); console.log(matrix); //$(this).css('transform', matrix) }); }); 

在这里阅读更多内容http://dev.opera.com/articles/view/understanding-3d-transforms/