rotate3d指的是什么

這篇文章給大家分享的是有關rotate3d指的是什么的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

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

　　rotate3d是什么

　　在3D空間之中，旋轉有3個自由維度，描述了旋轉軸。旋轉軸由一組[x,y,z]矢量定義，并且通過變換源點傳遞（即通過transform-originCSS屬性定義）。如果這些矢量被賦予非標準值，即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>類型，表示旋轉角度。正的角度值表示順時針旋轉，負值表示逆時針旋轉。

　　笛卡爾坐標on?2 齊次坐標on??2 笛卡爾坐標on?3 齊次坐標on??3

　　這種變換應用于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軸旋轉

　　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;
　　}

感謝各位的閱讀！關于“rotate3d指的是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！