溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“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如何實現旋轉動畫”的內容了，經過本文的學習后，相信大家對CSS如何實現旋轉動畫這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
