這篇文章主要講解了“CSS如何實現旋轉動畫”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS如何實現旋轉動畫”吧！

　　沿X軸方向旋轉

　　在代碼中指定旋轉方向。這次的起點是0度，終點是360度（一次旋轉），向X軸方向指定旋轉。然后利用鼠標懸停讓圖片旋轉。

　　animation-duration是動畫處理的時間，animation-iteration-count是動畫處理的次數。

　　@keyframesturnX{

　　0%{transform:rotateX(0deg);}

　　100%{transform:rotateX(360deg);}

　　}

　　#rX:hover{

　　animation-name:turnX;

　　animation-duration:3s;

　　animation-iteration-count:1;

　　}

　　將鼠標放在圖像上時，沿X軸方向旋轉，效果如下：

　　GIF.gif

　　沿Y軸方向旋轉

　　基本與X軸的旋轉幾乎相同。僅旋轉更改為Y軸方向的旋轉。

　　@keyframesturnY{

　　0%{transform:rotateY(0deg);}

　　100%{transform:rotateY(360deg);}

　　}

　　#rY:hover{

　　animation-name:turnY;

　　animation-duration:3s;

　　animation-iteration-count:1;

　　}

總結

以上是生活随笔為你收集整理的CSS如何实现旋转动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。