CSS的rotate3d()函數可以在3D空間中旋轉元素。它接受四個參數:一個表示旋轉軸的X分量、Y分量和Z分量的三個數值,以及一個表示旋轉角度的數值。
下面是一個使用rotate3d()函數的示例:
.box {
width: 200px;
height: 200px;
background-color: red;
transform: rotate3d(1, 1, 1, 45deg);
}
在這個示例中,我們定義了一個寬高為200px的紅色盒子,并使用rotate3d()函數將其沿著一個旋轉軸旋轉45度。該旋轉軸的X、Y和Z分量均為1,表示繞著一個以該盒子的中心為原點、方向為(1, 1, 1)的向量進行旋轉。
你可以根據需要調整旋轉軸的分量數值和旋轉角度來實現不同的旋轉效果。注意,旋轉角度可以為正數或負數,正數表示順時針旋轉,負數表示逆時針旋轉。
除了單獨使用rotate3d()函數之外,你還可以將其與其他transform函數一起使用,如translate3d()、scale3d()等,以組合實現更復雜的3D變換效果。