如何使用CSS和JavaScript旋轉圖片

Question

我想在這個網站的右上角模擬旋轉的月亮

如果我已經有了材料“圖片”

給我一些簡單的樣本或提示，然后我將對其進行研究。

Answer 1

該網站使用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

Answer 2

Google有一個很酷的jquery插件可以解決這個問題：

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