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;
}
CSS3影片教學欄位！ ！ ！
以上是CSS旋轉動畫怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
