问题描述
请参阅此处的演示：
当我点击中间的雨滴时，我希望它旋转到旋转圆圈的当前位置！我尝试下面的JS代码，但它不起作用！我要做的下一件事是用旋转圆圈旋转雨滴！
When I click on the middle raindrop , I would like it to rotate to the current position of the spinning circle! I tried below the JS code but it doesn't work! The next thing I want to do is the raindrop rotate with spining circle!
$(function() {
$('#center').click(function() {
var pos = $('#circle').css('transform')
$(this).css('transform', 'pos')
});
});
推荐答案
编辑：我说它不可能得到动画中变换的当前状态，但我错了。对此感到抱歉！
EDITED: I said that it is not posible to get the current status of the transform in an animation, but I was wrong. Sorry about that !
要做任何你想做的事，你不需要真正得到它;只需使用它。
To do what you want, any way, you don't need really to get it; just use it.
我稍微改变了你的HTML以将雨滴放在旋转的div中。
I have changed slightly your HTML to put the raindrop inside the rotating 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一起旋转。但它也是反转的，所以看起来是静态的。
In it, the raindrop is always rotating with the axis div. But it is also counter-rotating, so it appears to be static.
当您将鼠标悬停时，计数旋转将被禁用，并指向红色圆圈。只要你将它悬停在它上面就会继续这样做。
When you hover it, the count-rotation is disabled, and it points to red circle. And will continue to do so as long as you hover it.
要通过点击进行操作，只需将：hover属性定位到一个类，然后将此类设置为点击。
To do that thru a click, just asociate the :hover properties to a class, and set this class in the click.
这篇关于使用javascript在css3中获取@keyframe当前值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！