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 中最复杂但也是最强大的视觉工具之一，它为网页交互设计开辟了全新的可能性。

#CSS 3D 转换

#perspective 属性

#3D 转换函数

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

#rotate3d(x, y, z, angle)

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

#transform-style: preserve-3d

#backface-visibility