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 变换元素定义透视视图 |
