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圖片旋轉效果實現的全部內容了，更多有關CSS動畫的內容，大家可以參考

CSS3影片教學欄位！ ！ ！

以上是CSS旋轉動畫怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！