在 jquery 或 css 中旋转动画 [关闭]答案

【问题标题】：rotate animation in jquery or css [closed]在 jquery 或 css 中旋转动画 [关闭]
【发布时间】：2016-05-03 10:57:14
【问题描述】：

我想制作一个转轮运气游戏。我知道 jquery 有一些功能，如淡入淡出、淡出等。我只是想知道 jquery 中是否还有旋转效果？如果没有那么我该怎么做？谢谢

【问题讨论】：

w3schools.com/css/css3_2dtransforms.asp

标签： javascript jquery css animation

【解决方案1】：

我创建了一个临时小提琴供参考。您可能需要与此非常相似的东西，只需找到合适的图像即可。

使用以下样式的动画：

#wheel-container img{
height: 300px;
width: 300px; 
padding: 30px;
}
.spin-wheel {
animation: spin 0.5s infinite;
}

@keyframes spin {
0%: {
  transform: rotate(60deg);
}

25% {
  transform: rotate(120deg);
}

50% {
  transform: rotate(180deg);
}

75% {
  transform: rotate(270deg);
}
100% {
  transform: rotate(360deg);
}
}

https://jsfiddle.net/L8jpgL4v/23/

【讨论】：

【解决方案2】：

有几种方法可以做到这一点。最快的方法是使用 CSS。语法很简单。

-webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg);

请记住，要使动画平滑，您必须添加过渡样式：

-webkit-transition:transform 0.25s ease-out 0s; -ms-transition:transform 0.25s ease-out 0s; transition:transform 0.25s ease-out 0s;

或者，您可以通过 jQuery 执行此操作（此 jQuery 是从这个漂亮的答案中复制和粘贴的：https://stackoverflow.com/a/17348698/6049581）

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

$('.rotate').click(function() {
    rotation += 5;
    $(this).rotate(rotation);
});

如果您需要通过查看外部因素来更改旋转量，使用 jQuery 路由会更好。

【讨论】：