Question

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

img {  
  width: 100%;
}

我想让地球旋转。

https://jsfiddle.net/La3qbr0v/

Answer 1

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

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/

Answer 2

您可以使用CSS转换。

img {
  transform:rotate(ydeg);
}

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

如果您想为其设置动画，则可以使用关键帧 - https://codepen.io/quangogage/pen/OjYvNG?editors=1111

Answer 3

以下是我的代码。我的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); }
}

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

Answer 4

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

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

如何使图像旋转？

4 个答案: