CSS3 3D變換
CSS3允許你格式化使用3D轉換的元素。
將鼠標懸停在下面的內容看2D和3D變換之間的區別：
2D轉
3D旋轉
對於3D變換瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
其次通過數字-webkit-, -moz- ，或-o-指定用一個前綴工作的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| transform | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| backface-visibility | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
CSS3 3D變換
在本章中，您將了解以下3D轉換方法：
-
rotateX() -
rotateY() -
rotateZ()
該rotateX()方法
所述rotateX()方法在給定的程度繞其X軸的元素：
該rotateY()方法
所述rotateY()方法在給定的程度繞其Y軸的元素：
該rotateZ()方法
所述rotateZ()方法在給定的程度繞其Z軸的元素：
自測練習用！
CSS3轉換屬性
下表列出了所有的3D轉換屬性：
| 屬性 | 描述 |
|---|---|
| transform | 適用的2D或3D變換到一個元素 |
| transform-origin | 允許你改變轉化元素位置 |
| transform-style | 指定如何嵌套元素呈現在3D空間 |
| perspective | 指定在被認為怎樣3D元素的視角 |
| perspective-origin | 指定3D元素的底部位置 |
| backface-visibility | 定義時不要對著屏幕上的元素是否應該可見 |
3D變換方法
| 功能 | 描述 |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定義3D變換，使用16值的4x4矩陣 |
| translate3d(x,y,z) | 定義一個3D轉換 |
| translateX(x) | 定義了一個三維平移，僅使用值X軸 |
| translateY(y) | 定義了一個三維平移，僅使用用於Y軸的值 |
| translateZ(z) | 定義了一個三維平移，僅使用值的Z軸 |
| scale3d(x,y,z) | 定義一個3D縮放轉換 |
| scaleX(x) | 通過賦予一個值X軸限定了三維尺度變換 |
| scaleY(y) | 通過給為Y軸值定義一個3D縮放轉換 |
| scaleZ(z) | 通過給一個值的Z軸限定了三維尺度變換 |
| rotate3d(x,y,z,angle) | 定義一個3D旋轉 |
| rotateX(angle) | 限定沿X軸的3D旋轉 |
| rotateY(angle) | 限定沿Y軸的3D旋轉 |
| rotateZ(angle) | 限定沿Z軸的3D旋轉 |
| perspective(n) | 定義透視圖的3D轉換的元素 |