CSS 3D 变换
CSS 3D 变换
CSS 还支持 3D 转换。
将鼠标悬停在下面的元素上，即可查看 2D 和 3D 转换之间的区别：
2D 旋转
3D 旋转
在本章中，您将了解以下 CSS 属性：
transform
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 财产 | |||||
|---|---|---|---|---|---|
| 转换 | 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 变换 |
| 变换原点 | 允许您更改转换元素的位置 |
| 变换风格 | 指定嵌套元素在 3D 空间中的呈现方式 |
| 看法 | 指定查看 3D 元素的视角 |
| 视角起源 | 指定 3D 元素的底部位置 |
| 背面可见性 | 定义元素在不面向屏幕时是否可见 |
CSS 3D 变换方法
| 功能 | 描述 |
|---|---|
| 矩阵3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
定义 3D 变换，使用 16 个值的 4x4 矩阵 |
| 翻译3d（x,y,z) | 定义 3D 平移 |
| 翻译X（X) | 定义 3D 平移，仅使用 X 轴的值 |
| 平移Y（是) | 定义 3D 平移，仅使用 Y 轴的值 |
| 平移Z（是) | 仅使用 Z 轴的值定义 3D 平移 |
| scale3d（x,y,z) | 定义 3D 比例变换 |
| 比例X（X) | 通过指定 X 轴的值来定义 3D 比例变换 |
| scaleY(是) | 通过指定 Y 轴的值来定义 3D 比例变换 |
| 比例尺（是) | 通过指定 Z 轴的值来定义 3D 比例变换 |
| 旋转3d（x,y,z,角度) | 定义 3D 旋转 |
| 旋转X（角度) | 定义沿 X 轴的 3D 旋转 |
| 旋转Y（角度) | 定义沿 Y 轴的 3D 旋转 |
| 旋转Z（角度) | 定义沿 Z 轴的 3D 旋转 |
| 看法（n) | 定义 3D 变换元素的透视视图 |
