溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下CSS旋轉動畫如何實現，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
CSS要實現旋轉動畫需要用到transform屬性中rotate()來設置，可以在X軸方向，Y軸方向，Z軸方向上進行旋轉。
沿X軸方向旋轉
在代碼中指定旋轉方向。這次的起點是0度，終點是360度（一次旋轉），向X軸方向指定旋轉。然后利用鼠標懸停讓圖片旋轉。
animation-duration是動畫處理的時間，animation-iteration-count是動畫處理的次數。
@keyframes turnX{
0%{transform:rotateX(0deg);}
100%{transform:rotateX(360deg);}
}
#rX:hover{
animation-name:turnX;
animation-duration:3s;
animation-iteration-count:1;
}將鼠標放在圖像上時，沿X軸方向旋轉，效果如下：
沿Y軸方向旋轉
基本與X軸的旋轉幾乎相同。僅旋轉更改為Y軸方向的旋轉。
@keyframes turnY{
0%{transform:rotateY(0deg);}
100%{transform:rotateY(360deg);}
}
#rY:hover{
animation-name:turnY;
animation-duration:3s;
animation-iteration-count:1;
}將鼠標懸停在圖像上時，它會沿Y軸方向旋轉，效果如下：
沿Z軸方向旋轉
也基本與X軸的旋轉幾乎相同。僅更改旋轉到Z軸方向的旋轉。
@keyframes turnZ{
0%{transform:rotateZ(0deg);}
100%{transform:rotateZ(360deg);}
}
#rZ:hover{
animation-name:turnZ;
animation-duration:3s;
animation-iteration-count:1;
}將鼠標放在圖像上時，沿Z軸方向旋轉效果如下：
看完了這篇文章，相信你對CSS旋轉動畫如何實現有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
