纯靠position做不出真正3D悬浮层，必须用perspective+transform-style:preserve-3d+transform（rotateX/rotateY/translateZ）组合；z-index仅控制2D层叠，不产生透视、景深或视角响应。
直接说结论：纯靠 position 做不出真正“3D”的悬浮层，它只能堆叠平面卡片；要炫酷且有立体感，必须用 perspective + transform-style: preserve-3d + transform（含 rotateX、rotateY、translateZ）这套组合。
为什么 position: absolute + z-index 不是 3D
z-index 只控制层叠顺序，不产生透视、不响应视角变化、不模拟景深——它只是把几个 2D 平面按前后排好队。用户看到的是“重叠”，不是“悬浮在空间里”。真 3D 效果需要浏览器理解 Z 轴距离和观察点位置。
- 常见错误现象：
z-index设得再高，悬停时卡片也不会“朝鼠标倾斜”或“背景慢动前景快动” - 如果你用
position: absolute搭配top/left微调位置来“模拟”浮动，动画会卡顿（触发布局重排），且无法 GPU 加速 - 想让多个卡片彼此有真实空间关系（比如一张在另一张前方偏右上方），
z-index完全无能为力
perspective 和 transform-style: preserve-3d 必须成对出现
perspective 写在父容器上（如 .card-scene），定义“眼睛离卡片多远”；transform-style: preserve-3d 写在卡片自身（如 .card），告诉浏览器：“别把我孩子拍平，它们要一起进 3D 空间”。漏掉任一，3D 就塌成 2D。
- 典型错误：
perspective: 1000px写在.card上，但没加transform-style: preserve-3d→ 旋转像贴纸，没有厚度感 - 另一个典型：
transform-style: preserve-3d写了，但父级没perspective，且没在.card自身设perspective→ 旋转无远近压缩，看起来像在转一个硬币 - 推荐值：
perspective: 800px~1200px，太小（如200px）易畸变，太大（如3000px）近乎无透视
rotateX/rotateY + translateZ 才构成空间悬浮感
单靠 transform: translateY(-10px) 是上浮，不是悬浮；加上 rotateX(-3deg) rotateY(3deg) 模拟受力倾斜，再给内部元素（如标题、图标）不同 translateZ 值，才能触发视差——这才是用户感知的“立体悬浮”。
立即学习“前端免费学习笔记（深入）”；
- 角度务必克制：±2°~±6° 之间足够，超过 ±8° 在部分显示器上会引发视觉不适
-
translateZ值建议用px单位（如translateZ(20px)），避免百分比导致缩放失真 - 所有参与 3D 的子元素（包括文字、图片、伪元素）都需继承
transform-style: preserve-3d，否则它们会被强制压回卡片平面 - 性能提示：加
will-change: transform到.card，但别加到每个子元素上，否则触发过多图层分裂
hover 触发时容易忽略 backface-visibility
翻转类 3D 卡片（比如正反两面）若没设 backface-visibility: hidden，Chrome/Firefox 里会出现背面文字透出、模糊、边缘锯齿等问题——这不是 bug，是 3D 渲染默认行为：正反面同时绘制，无自动遮挡。
- 必须给每张“面”（如
.card__front和.card__back）单独加backface-visibility: hidden - 别只加在容器上，它不继承；也别加在
:hover里，得始终生效 - 移动端 Safari 对
backface-visibility更敏感，漏掉会导致翻转卡顿或白屏
真正难的不是写对那几行 CSS，而是理解：浏览器里的“3D”本质是一套投影规则，不是建模软件。一旦开始调 perspective 和 translateZ，就要同步检查所有祖先元素是否意外创建了新的层叠上下文（比如带 opacity、filter 或 transform 的父级），否则你的 3D 空间可能被悄悄截断。这个坑，调试时最花时间。
