如何使用CSS和JavaScript旋转图片

该网站使用CSS转换。请查看我制作的演示。

全屏演示

JS小提琴

要实现该输出，请首先创建动画关键帧

的CSS

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}

然后使用它。

.moon{
-webkit-animation:rotate 420s infinite linear;
}

注意：要使其在其他浏览器中起作用，请在动画和用法中添加css前缀，例如

 -ms
 -o
 -moz