CSS3 3D 转换

CSS 3D 变换 (CSS 3D Transforms)

3D 变换简介

CSS 3D 变换是在 2D 变换的基础上扩展的，允许您在三维空间中操作元素，增加深度和透视效果。

您可以围绕 X、Y 或 Z 轴旋转元素，并沿着 Z 轴平移它们（向观看者靠近或远离）。

比较 2D 与 3D 旋转 (想象将鼠标悬停在示例上):

2D 旋转 (平面旋转) 3D 旋转 (倾斜旋转)

浏览器对 3D 变换的支持

现代浏览器对 3D 变换有良好的支持。虽然对于一些旧版本可能需要添加厂商前缀 (vendor prefixes)，但现在通常已不再需要。

属性 (Property)	Internet Explorer	Chrome	Firefox	Safari	Opera
transform (3D functions)	IE 10+	Chrome	Firefox 10+	Safari	Opera
perspective	IE 10+	Chrome	Firefox 16+	Safari	Opera
transform-style	IE 11+	Chrome	Firefox 16+	Safari	Opera
backface-visibility	IE 10+	Chrome	Firefox 16+	Safari	Opera

创建 3D 空间

要为子元素启用真正的 3D 上下文 (3D context)，您需要对父容器应用以下属性:

• perspective: 定义透视效果的强度（3D 空间看起来有多“深”）。值越低，透视效果越极端。应用于父元素。示例: perspective: 1000px;。
• perspective-origin: 设置透视效果的消失点位置 (vanishing point)。默认为 center center。应用于父元素。
• transform-style: preserve-3d;: 允许定位在 3D 空间中的子元素保持它们彼此之间的 3D 位置关系。应用于父元素（或任何包含 3D 变换子元素的元素）。

如果没有这些父元素属性，子元素的 3D 变换可能会显得“扁平化”。

常用的 3D 变换函数

这些函数通过 transform 属性应用于您想要操作的元素:

• rotateX(angle): 围绕水平 X 轴旋转元素。
• rotateY(angle): 围绕垂直 Y 轴旋转元素。
• rotateZ(angle): 围绕 Z 轴旋转元素（类似于 2D 的 rotate）。
• rotate3d(x, y, z, angle): 围绕一个自定义的 3D 向量旋转。
• translateZ(distance): 沿着 Z 轴移动元素（靠近或远离）。
• translate3d(x, y, z): 在 3D 空间中移动元素。
• scaleZ(factor): 沿着 Z 轴缩放元素。
• scale3d(x, y, z): 在 3D 空间中缩放元素。
• matrix3d(...): 使用一个 4x4 矩阵组合所有 3D 变换。

rotateX() 方法

围绕元素的水平轴旋转，就像向前或向后翻转一样。

[想象一个元素向前倾斜]

示例: 围绕 X 轴旋转 60 度。

.container {
  perspective: 500px; /* 需要此属性才能看到明显的 3D 效果 */
}

.target-element {
  transform: rotateX(60deg);
}

rotateY() 方法

围绕元素的垂直轴旋转，就像开门一样。

[想象一个元素像旋转门一样旋转]

示例: 围绕 Y 轴旋转 -45 度。

.container {
  perspective: 500px;
}

.target-element {
  transform: rotateY(-45deg);
}

rotateZ() 方法

围绕垂直于屏幕的轴旋转（与 2D 的 rotate() 相同）。

[想象一个元素在屏幕上平面旋转]

示例: 围绕 Z 轴旋转 90 度。

.target-element {
  transform: rotateZ(90deg); /* 看到此效果不需要透视 */
}

backface-visibility 属性

确定当元素旋转后背面朝向观察者时，其“背面”是否可见。

• visible (默认): 显示背面（通常是镜像的）。
• hidden: 隐藏背面，当元素背面朝向时使其不可见。

示例: 当围绕 Y 轴旋转 180 度时隐藏元素。

.card {
  transform-style: preserve-3d; /* 如果 card 有正面/背面 */
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

CSS 3D 变换属性总结

属性 (Property)	描述 (Description)
transform	对元素应用 2D 或 3D 变换。
transform-origin	改变变换的起源点位置。
transform-style	指定嵌套元素在 3D 空间中的渲染方式 (flat 或 preserve-3d)。应用于父元素。
perspective	设置 3D 变换的透视深度。应用于父元素。
perspective-origin	设置消失点位置。应用于父元素。
backface-visibility	定义元素旋转时背面是否可见 (visible 或 hidden)。

3D 变换函数总结

函数 (Function)	描述 (Description)
matrix3d(…)	使用一个由 16 个值组成的 4x4 矩阵定义一个 3D 变换。
translate3d(x,y,z)	定义一个 3D 平移。
translateX(x)	定义沿 X 轴的平移 (与 2D 相同)。
translateY(y)	定义沿 Y 轴的平移 (与 2D 相同)。
translateZ(z)	定义沿 Z 轴的平移。
scale3d(x,y,z)	定义一个 3D 缩放变换。
scaleX(x)	定义沿 X 轴的缩放 (与 2D 相同)。
scaleY(y)	定义沿 Y 轴的缩放 (与 2D 相同)。
scaleZ(z)	定义沿 Z 轴的缩放。
rotate3d(x,y,z,angle)	定义围绕自定义向量的 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转 (与 2D rotate 相同)。
perspective(n)	定义直接在元素上应用的透视视图 (比应用于父元素不常见)。