站長資訊網
在css3中，rotate3d()方法用于定義元素的3d變換，將元素圍繞固定軸移動而不使其變形，運動量由指定的角度定義；若參數設置為正數，元素會沿著順時針運動，若參數設置為負數，元素會沿著逆時針運動，語法為“transform:rotate3d(x,y,z,角度)”。
本教程操作環境：windows10系統、CSS3&&HTML5版本、Dell G3電腦。
css3中rotate3d方法怎么用
rotate3d() CSS 函數定義一個變換，它將元素圍繞固定軸移動而不使其變形。運動量由指定的角度定義; 如果為正，運動將為順時針，如果為負，則為逆時針。
在 3D 空間之中，旋轉有 3 個自由維度，描述了旋轉軸。旋轉軸由一組 [x, y, z] 矢量定義，并且通過變換源點傳遞（即通過 transform-origin CSS 屬性定義）。如果這些矢量被賦予非標準值，即 3 個坐標值的平方和不等于 1 時，它將會被內部隱式標準化。非標準矢量，例如空值和 [0, 0, 0]，將會使旋轉不起作用，但是不影響整個 CSS 屬性的其他效果（譯者注：如 transform 中的多項變換）。
與平面旋轉相反的是，3D 旋轉的組合通常是不可交換的；這意味著定義旋轉規則的值的順序是嚴格控制的。
語法
rotate3d(x, y, z, a)
值
-
x<number> 類型，可以是 0 到 1 之間的數值，表示旋轉軸 X 坐標方向的矢量。
-
y<number> 類型，可以是 0 到 1 之間的數值，表示旋轉軸 Y 坐標方向的矢量。
-
z<number> 類型，可以是 0 到 1 之間的數值，表示旋轉軸 Z 坐標方向的矢量。
-
a <angle> 類型，表示旋轉角度。正的角度值表示順時針旋轉，負值表示逆時針旋轉。
示例如下：
繞 Y 軸旋轉
HTML
<div>Normal</div> <div class="rotated">Rotated</div> Copy to Clipboard
CSS
body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(0, 1, 0, 60deg); background-color: pink; } Copy to Clipboard
效果
圍繞自定義軸旋轉
HTML
<div>Normal</div> <div class="rotated">Rotated</div> Copy to Clipboard
CSS
body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(1, 2, -1, 192deg); background-color: pink; } Copy to Clipboard
效果
（學習視頻分享：css視頻教程）
