方法: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視頻教程)