CSS 3D 转换

CSS 3D 转换允许你在三维空间中对元素进行操作。除了在 X 轴（水平）和 Y 轴（垂直）上移动，你现在还可以沿 Z 轴（深度，即朝向或远离观察者）移动、旋转和缩放元素。

perspective 属性

要激活 3D 空间，你需要在父容器上设置 perspective 属性。这个属性定义了 3D 元素距离观察者的距离，它决定了 3D 效果的强度。

• 值越小，透视效果越强烈，看起来越夸张。
• 值越大，透视效果越平缓。

.container {
  perspective: 1000px;
}

3D 转换函数

translate3d(x, y, z) 和 translateZ(z)

translateZ() 用于沿 Z 轴移动元素。正值使其更靠近观察者（看起来更大），负值使其更远离观察者（看起来更小）。

.box {
  transform: translateZ(100px);
}

rotate3d(x, y, z, angle)

这个函数允许你围绕一个自定义的 3D 向量进行旋转。更常用的是它的简写形式：

• rotateX(angle): 围绕 X 轴旋转。想象一下一根水平穿过元素中心的烤肉叉。
• rotateY(angle): 围绕 Y 轴旋转。想象一下一根垂直穿过元素中心的烤肉叉。
• rotateZ(angle): 围绕 Z 轴旋转。这与 2D 的 rotate() 效果相同。

.card {
  transform: rotateY(60deg);
}

scale3d(x, y, z) 和 scaleZ(z)

scaleZ() 用于在 Z 轴方向上缩放元素。这会影响元素在 3D 空间中的厚度，但如果没有其他 3D 变换，你可能看不到明显的效果。

transform-style: preserve-3d

当你有一个嵌套的 3D 结构时（例如，一个立方体的每个面都是一个 div），你需要在它们的直接父容器上设置 transform-style: preserve-3d;。

这会告诉浏览器，该元素的子元素也应该存在于同一个 3D 空间中，而不是被“压平”到父元素的平面上。

.cube {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(45deg);
}

.cube-face {
  position: absolute;
  /* ...每个面都有自己的旋转和平移来构成一个立方体... */
}

backface-visibility

当一个元素被旋转到背面朝向观察者时，backface-visibility 属性可以控制其是否可见。

• visible: (默认) 背面是可见的（通常是正面的镜像）。
• hidden: 背面是不可见的。

这在创建翻转卡片等效果时非常有用。

.card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

3D 转换是 CSS 中最复杂但也是最强大的视觉工具之一，它为网页交互设计开辟了全新的可能性。