3D 翻转卡片

核心原理

3D 翻转卡片是 CSS 3D 变换中最经典的应用场景。它并不是单一属性的功劳，而是需要构建一个完整的 3D 空间体系。

需要三个关键步骤（对应三个层级的元素）：

1. 舞台（Container）：设置 perspective（视距），开启 3D 视觉透视。
2. 容器（Wrapper）：设置 transform-style: preserve-3d，确保子元素在 3D 空间中渲染，而不是被压平在 2D 平面上。
3. 面（Faces）：设置 backface-visibility: hidden，使元素背向用户时隐藏；并且给背面元素设置transform: rotateX/Y(180deg)，使背面元素默认旋转 180 度。

实现

垂直翻转

同样的原理，只需要修改旋转轴为 X 轴即可。

.card-scene:hover .card {
  transform: rotateX(180deg);
}

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