CSS 3D 變換
CSS 3D 變換
CSS 也支援 3D 變換。
將滑鼠懸停在下面的元素上，檢視 2D 和 3D 變換的區別
2D 旋轉
3D 旋轉
在本章中，您將瞭解以下 CSS 屬性
轉換
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| 轉換 | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
CSS 3D 變換方法
使用 CSS transform 屬性，您可以使用以下 3D 變換方法
rotateX()rotateY()rotateZ()
rotateX() 方法
rotateX() 方法可以圍繞元素的 X 軸以給定的度數進行旋轉。
rotateY() 方法
rotateY() 方法可以圍繞元素的 Y 軸以給定的度數進行旋轉。
rotateZ() 方法
rotateZ() 方法可以圍繞元素的 Z 軸以給定的度數進行旋轉。
CSS 變換屬性
下表列出了所有 3D 變換屬性
| 屬性 | 描述 |
|---|---|
| 轉換 | 對元素應用 2D 或 3D 變換 |
| transform-origin | 允許您更改變換元素上的位置 |
| transform-style | 規定了 3D 空間中巢狀元素的渲染方式 |
| perspective | 規定了觀看 3D 元素時使用的視角 |
| perspective-origin | 規定了 3D 元素的底部位置 |
| backface-visibility | 定義了當元素背面朝向螢幕時是否可見 |
CSS 3D 變換方法
| 函式 | 描述 |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
使用 16 個值的 4x4 矩陣定義 3D 變換 |
| translate3d(x,y,z) | 定義 3D 平移 |
| translateX(x) | 定義了一個 3D 轉換，僅使用 X 軸的值 |
| translateY(y) | 定義了一個 3D 轉換，僅使用 Y 軸的值 |
| translateZ(z) | 僅使用 Z 軸的值定義 3D 平移 |
| scale3d(x,y,z) | 定義 3D 縮放變換 |
| scaleX(x) | 透過給出 X 軸的值來定義 3D 縮放變換 |
| scaleY(y) | 定義了一個 3D 縮放變換，透過給出 Y 軸的值 |
| scaleZ(z) | 透過為 Z 軸提供值來定義 3D 縮放變換 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉 |
| rotateX(角度) | 定義沿 X 軸的 3D 旋轉 |
| rotateY(角度) | 定義沿 Y 軸的 3D 旋轉 |
| rotateZ(角度) | 定義沿 Z 軸的 3D 旋轉 |
| perspective(n) | 為 3D 變換元素定義透視檢視 |
