纯靠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）组合。
为什么 z-index 和 position: absolute 不是 3D
z-index 只控制层叠顺序，不产生透视、不响应鼠标视角、不模拟景深——它只是把几个 2D 平面按前后排好队。常见错误现象包括：
- 悬停时卡片只上移但不倾斜，看起来像“贴纸飘起来”
- 多张卡片之间无法形成真实空间关系（比如一张在另一张右前方），
z-index完全无能为力 - 用
top/left微调位置来“模拟”浮动，会触发布局重排，动画卡顿且无法 GPU 加速
perspective 和 transform-style: preserve-3d 必须成对出现
漏掉任一，3D 就塌成 2D：
-
perspective必须写在父容器（如.card-scene）上，定义“眼睛离卡片多远”；写在卡片自身上通常无效或效果异常 -
transform-style: preserve-3d必须写在卡片自身（如.card）上，告诉浏览器：“别把我孩子拍平，它们要一起进 3D 空间” - 典型错误：
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) 是上浮，不是悬浮；要触发用户感知的“立体感”，必须引入空间旋转和 Z 轴分层：
- 悬停时加
rotateX(-3deg) rotateY(3deg)模拟受力倾斜，角度务必克制：±2°～±6° 足够，超过 ±8° 在部分显示器上会引发视觉不适 - 卡片内部元素（如标题、图标、背景图）需设不同
translateZ值（建议用px单位，如translateZ(20px)），避免百分比导致缩放失真 - 所有动画属性必须仅使用 GPU 加速的
transform和opacity；box-shadow可叠加但不宜过多层，否则影响性能 - 务必加
will-change: transform提示浏览器提前优化，但不要滥用——只加在真正需要动画的元素上
最容易被忽略的是：父容器不能有 overflow: hidden，否则 3D 旋转中伸出的部分会被裁掉；另外，transform-origin 默认是 center center，但若卡片内容偏上或偏下，需手动调整支点位置，否则倾斜中心会错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
