css3怎麼設定向哪個方向3d旋轉

方法：1、用「transform: rotateX(角度);」樣式設定元素沿著X軸方向3d旋轉；2、用「transform:rotateY(角度);」樣式設定元素沿著Y軸方向3d旋轉；3、用rotate3d()方法設定元素向任意方向3d旋轉。

本教學操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。

css3怎麼設定3d往哪個方向旋轉

一、沿著X軸旋轉rotateX

transform: rotateX(360deg);

立體感不夠，可以加上一個透視perspective，注意要加在觀察元素的父盒子上面

 就可以變成這個樣子

 

 二、沿著Y軸旋轉  rotateY

#

 transform: rotateY(360deg);

 

 三、沿著Z軸旋轉  rotateZ

 transform: rotateZ(360deg);

和2D旋轉差不多

 四、還可以自訂旋轉軸

 transform: rotate3d(1, 1, 0, 360deg);

 

（學習影片分享：css影片教學）

以上是css3怎麼設定向哪個方向3d旋轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！