rotate3d指的是什么

這篇文章給大家分享的是有關(guān)rotate3d指的是什么的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

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

　　rotate3d是什么

　　在3D空間之中，旋轉(zhuǎn)有3個(gè)自由維度，描述了旋轉(zhuǎn)軸。旋轉(zhuǎn)軸由一組[x,y,z]矢量定義，并且通過(guò)變換源點(diǎn)傳遞（即通過(guò)transform-originCSS屬性定義）。如果這些矢量被賦予非標(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)格控制的。

　　語(yǔ)法

　　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)。

　　笛卡爾坐標(biāo)on?2 齊次坐標(biāo)on??2 笛卡爾坐標(biāo)on?3 齊次坐標(biāo)on??3

　　這種變換應(yīng)用于3D空間，不可用于平面空間 1+(1-cos(a))(x2-1) z·sin(a)+xy(1-cos(a)) -y·sin(a)+xz·(1-cos(a)) -z·sin(a)+xy·(1-cos(a)) 1+(1-cos(a))(y2-1) x·sin(a)+yz·(1-cos(a))

　　ysin(a)+xz(1-cos(a)) -xsin(a)+yz(1-cos(a)) 1+(1-cos(a))(z2-1) t

　　0 0 0 1

　　rotate3d示例

　　繞Y軸旋轉(zhuǎn)

　　HTML
　　<div>Normal</div>
　　<divclass="rotated">Rotated</div>
　　CSS
　　body{
　　perspective:800px;
　　}
　　div{
　　width:80px;
　　height:80px;
　　background-color:skyblue;
　　}
　　.rotated{
　　transform:rotate3d(0,1,0,60deg);
　　background-color:pink;
　　}

感謝各位的閱讀！關(guān)于“rotate3d指的是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！