在css3中，rotate3d()方法用于定義元素的3d變換，將元素圍繞固定軸移動(dòng)而不使其變形，運(yùn)動(dòng)量由指定的角度定義；若參數(shù)設(shè)置為正數(shù)，元素會(huì)沿著順時(shí)針運(yùn)動(dòng)，若參數(shù)設(shè)置為負(fù)數(shù)，元素會(huì)沿著逆時(shí)針運(yùn)動(dòng)，語法為“transform:rotate3d(x,y,z,角度)”。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。

css3中rotate3d方法怎么用

rotate3d() CSS 函數(shù)定義一個(gè)變換，它將元素圍繞固定軸移動(dòng)而不使其變形。運(yùn)動(dòng)量由指定的角度定義; 如果為正，運(yùn)動(dòng)將為順時(shí)針，如果為負(fù)，則為逆時(shí)針。

在 3D 空間之中，旋轉(zhuǎn)有 3 個(gè)自由維度，描述了旋轉(zhuǎn)軸。旋轉(zhuǎn)軸由一組 [x, y, z] 矢量定義，并且通過變換源點(diǎn)傳遞（即通過 transform-origin CSS 屬性定義）。如果這些矢量被賦予非標(biāo)準(zhǔn)值，即 3 個(gè)坐標(biāo)值的平方和不等于 1 時(shí)，它將會(huì)被內(nèi)部隱式標(biāo)準(zhǔn)化。非標(biāo)準(zhǔn)矢量，例如空值和 [0, 0, 0]，將會(huì)使旋轉(zhuǎn)不起作用，但是不影響整個(gè) CSS 屬性的其他效果（譯者注：如 transform 中的多項(xiàng)變換）。

與平面旋轉(zhuǎn)相反的是，3D 旋轉(zhuǎn)的組合通常是不可交換的；這意味著定義旋轉(zhuǎn)規(guī)則的值的順序是嚴(yán)格控制的。

語法

rotate3d(x, y, z, a)

值

• x<number> 類型，可以是 0 到 1 之間的數(shù)值，表示旋轉(zhuǎn)軸 X 坐標(biāo)方向的矢量。

• y<number> 類型，可以是 0 到 1 之間的數(shù)值，表示旋轉(zhuǎn)軸 Y 坐標(biāo)方向的矢量。

• z<number> 類型，可以是 0 到 1 之間的數(shù)值，表示旋轉(zhuǎn)軸 Z 坐標(biāo)方向的矢量。

• a <angle> 類型，表示旋轉(zhuǎn)角度。正的角度值表示順時(shí)針旋轉(zhuǎn)，負(fù)值表示逆時(shí)針旋轉(zhuǎn)。

示例如下：

繞 Y 軸旋轉(zhuǎn)

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

效果

圍繞自定義軸旋轉(zhuǎn)

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

效果

（學(xué)習(xí)視頻分享：css視頻教程）