CSS 3D 变换
CSS 3D 变换
CSS 也支持 3D 变换。
将鼠标悬停在下面的元素上，查看 2D 变换和 3D 变换之间的区别
2D 旋转
3D 旋转
在本节中，您将学习以下 CSS 属性
transform
浏览器支持
表格中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| 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 变换属性
| 属性 | 描述 |
|---|---|
| transform | 将 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) | 定义 3D 平移，只使用 Z 轴的值 |
| scale3d(x,y,z) | 定义 3D 缩放变换 |
| scaleX(x) | 通过为 X 轴提供值来定义 3D 缩放变换 |
| scaleY(y) | 通过为 Y 轴提供值来定义 3D 缩放变换 |
| scaleZ(z) | 通过为 Z 轴提供值来定义 3D 缩放变换 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转 |
| rotateY(角度) | 定义沿 Y 轴的 3D 旋转 |
| rotateZ(角度) | 定义沿 Z 轴的 3D 旋转 |
| perspective(n) | 为 3D 变换元素定义透视视图 |
