一、三大核心属性

属性 作用 是否必须 类比
perspective 设置观察者距离，开启 3D 视觉空间 ✅ 必须（父容器） 摄像机离场景多远
transform-style: preserve-3d 让子元素的子元素进入 3D 空间，不被压扁 ✅ 嵌套 3D 时必须 打开“3D 结界”
backface-visibility: hidden 元素背面朝你时自动隐藏 ✅ 翻转/立方体时必须 纸牌转过去就消失

二、核心概念解析

1. perspective（透视）

  • 作用：决定透视的强烈程度
  • perspective: 200px → 近，透视强（夸张）
  • perspective: 1000px → 远，透视弱（平缓）
  • 必须加在父容器上，不能加在变换元素自身
1
2
3
.scene {
  perspective: 800px;
}

2. transform-style: preserve-3d

  • 默认是 flat → 子元素被压扁到父平面,换言之就是子元素应用 3d 效果看不出来，比如 translateZ 就和 scale 看不出区别
  • 加上后，子元素才能真正使用 translateZ、rotateX/Y
  • 用于：3D 立方体、卡片翻转、旋转木马等
1
2
3
.cube {
  transform-style: preserve-3d;
}

3. backface-visibility: hidden

  • 防止“背面透出”或“双面重叠”
  • 通常加在每个面上
  • 做翻转卡片时必备
1
2
3
.face {
  backface-visibility: hidden;
}

三、3D 变换与布局的关系

“元素还是在原来的位置。”

✅ 关键结论：

  • transform 不脱离文档流
  • 视觉上可以飞、转、放大
  • 但占位不变，不影响其他元素布局
  • 兄弟元素不会“填补空缺”

🎯 类比：

transform 是“全息投影”或“Photoshop 自由变换”——只改视觉，不改结构。

⚠️ 常见误区

误区 正确理解
translateZ(100px) 会挡住别人 ❌ 不一定，层级由 z-index 决定
scale(2) 会挤开兄弟元素 ❌ 不会，它只是视觉放大
rotateY(180deg) 背面会自动隐藏 ❌ 必须加 backface-visibility: hidden

四、最佳实践代码模板

1
2
3
4
5
6
<div class="scene">
  <div class="card">
    <div class="face front">正面</div>
    <div class="face back">背面</div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.scene {
  perspective: 800px; /* 观察距离 */
}

.card {
  width: 300px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d; /* 保持3D空间 */
  transition: transform 0.6s ease;
}

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

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 背面隐藏 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.front {
  background: blue;
}

.back {
  background: red;
  transform: rotateY(180deg); /* 背面默认翻转 */
}

五、一句话心法

“perspective 开眼，preserve-3d 立体，backface-visibility 隐藏，transform 魔术——动的是形，不动的是根。”

六、进阶提示

  • 想做 3D 动画？用 transform 性能好（GPU 加速）
  • 想真正移动位置？用 margin 或 position
  • 想优化性能？加 will-change: transform
  • 想做自动旋转？用 @keyframes + transform: rotateY