如何使用css和javascript旋转图片

Question

我想模拟这个website

右上角的旋转月亮

如果我已经有材料＆＃34;图片＆＃34;

给我一​​些简单的样品或小费然后我会研究它。

Answer 1

该网站使用css变换。请检查我制作的演示。

Full Screen Demo

JS Fiddle

要获得输出，首先创建动画关键帧

<强> 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

Answer 2

谷歌有一个很酷的jquery插件可以解决这个问题：

https://code.google.com/p/jqueryrotate/