也许答案很简单，但我找到的每个解决方案要么无限旋转，要么有一个旋转。我想做的是向前旋转元素，然后向后旋转到原始位置，由按下按钮触发。
这是我正在制作的一个小游戏的一部分，它在JSFiddle上。它向上旋转，但我希望div 旋转回原始位置：
$(function () {
$('#button').click(function() {
swingArm();
});
});
function swingArm() {
$rollingPin = $('#rolling-pin');
$({ deg: 0 }).animate({ deg: 50 }, {
duration: 400,
step: function (now) {
$rollingPin.css({
transform: 'rotate(' + now + 'deg)'
});
}
});
}
https://jsfiddle.net/cw4bj3tf/
我怎样才能做到这一点？
使用此方法，您只需使用 CSS3 动画和 jQuery 的切换类来触发它。这是一种更简单的方法，允许您指定关键帧。我将其设置为默认的秋千，但您可以轻松地让它举起别针并挥动它，就像他不高兴或其他什么一样。希望这有帮助！
编辑：我将其更改为使用并从样式中删除。现在，这在每个点击事件上都有效。您可以在 or 函数中以毫秒为单位指定时间，或者默认为 500 毫秒。 享受！
编辑：只是为了好玩，右键单击按钮，你可以看到我所指的摇晃！
$('#button').click(function() {
swingArm();
});
$('#button').contextmenu(function() {
shakeArm( 1000 );
});
function moveToby() {
setInterval(function() {
$(".toby").stop(true, true).animate({
left: 450
}, 1000,
function() {
$(this).stop(true, true).animate({
left: 0
}, 1000);
});
}, 2000);
}
function swingArm( swingTime ) {
if(!swingTime) swingTime = 500;
$("#rolling-pin").css('animation', swingTime+'ms swing-pin');
setTimeout(function(){
$("#rolling-pin").removeAttr('style');
},swingTime+1);
}
function shakeArm( swingTime ) {
if(!swingTime) swingTime = 500;
$("#rolling-pin").css('animation', swingTime+'ms shake-pin');
setTimeout(function(){
$("#rolling-pin").removeAttr('style');
},swingTime+1);
}#game-container {
position: relative;
width: 700px;
height: 660px;
background-image: url('https://i.imgur.com/QxOVkCJ.jpg');
background-size: cover;
}
#rolling-pin {
position: absolute;
top: 300px;
left: 480px;
width: 100px;
height: 75px;
background-image: url('https://i.imgur.com/zcZTO3z.png');
background-size: cover;
}
#button {
position: absolute;
background-image: url('https://i.imgur.com/v3sQNLD.png');
background-size: cover;
height: 100px;
width: 100px;
bottom: 10px;
right: 10px;
cursor: pointer;
}
#button:hover {
transform: scale(1.1);
}
.toby {
position: absolute;
height: 239px;
width: 80px;
bottom: 157px;
background-image: url('https://i.imgur.com/ym3YyVW.png');
background-size: cover;
}
.hidden {
display: none;
}
@keyframes swing-pin {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(50deg);
}
100%{
transform: rotate(0deg);
}
}
@keyframes shake-pin {
0% {
transform: rotate(0deg);
}
30% {
transform: rotate(50deg);
}
40% {
transform: rotate(25deg);
}
50% {
transform: rotate(50deg);
}
60% {
transform: rotate(25deg);
}
70% {
transform: rotate(50deg);
}
100%{
transform: rotate(0deg);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="game-container">
<div id="rolling-pin"></div>
<div class="toby"></div>
<div class="toby hidden"></div>
<div id="button"></div>
<div id="youWin">Continue</div>
<div id="youLose">Continue</div>
</div>
</body>