如何让图像旋转？答案

【问题标题】：How do I make an image rotate?如何让图像旋转？
【发布时间】：2018-02-15 12:58:14
【问题描述】：

<img src="http://i.imgur.com/uUYXqAv.png">

img {  
  width: 100%;
}

我想让地球旋转。

https://jsfiddle.net/La3qbr0v/

【问题讨论】：

我认为这里已经回答了这个问题Link
我认为这个主题已经在这个Link中得到了回答

标签： javascript jquery css animation jquery-animate

【解决方案1】：

下面是我的代码。我的jsFiddle。

img {    
width: 100%;
animation: rotate 60s ease infinite;
-webkit-animation: rotate 60s ease infinite;
}

@keyframes rotate{
  100%{ transform: rotate(360deg); }
}
@-webkit-keyframes rotate{
  100%{ transform: rotate(360deg); }
}

&lt;img src="http://i.imgur.com/uUYXqAv.png"&gt;

【讨论】：

【解决方案2】：

您可以使用设置变量的脚本，然后让函数设置间隔来旋转图片。

var start = 0;
$(document).ready(function() {
     setInterval(function() {
          $("picture").rotate(start);
     }, 100);
});

【讨论】：

虽然这样可行，但不如使用 CSS 高效。 JQuery 很慢，应该避免使用 CSS 完成相同的功能
你不需要 JS。 CSS 就够了

【解决方案3】：

您可以使用 CSS 转换。

img {
  transform:rotate(ydeg);
}

（y 是 0 到 360 之间的任意数字）

如果你想为它制作动画，你可以使用关键帧 - https://codepen.io/quangogage/pen/OjYvNG?editors=1111

【讨论】：

【解决方案4】：

您好，您可以使用关键帧：

img {
    position: absolute;   
    width: 100%;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

看这里：

https://jsfiddle.net/loanburger/47z5bro3/

【讨论】：