阴影无深度感是因为3D空间未正确构建：需将transform-style: preserve-3d设在直接包含正反面的父元素（如.card），而非外层容器；perspective应设在.card父容器且值取600px～1000px；阴影纵深依赖translateZ()配合box-shadow，且需避免overflow: hidden、filter及错误z-index干扰。
翻转后阴影没深度感，不是阴影写得不对，而是 3D 空间根本没搭起来——transform-style: preserve-3d 没生效，或者它作用的位置错了。
为什么加了 transform-style: preserve-3d 阴影还是平的
浏览器默认把所有子元素压平到 Z=0 平面渲染，transform-style: preserve-3d 的作用是“解压”这个扁平化，但它只对**直系子元素**生效。如果把它加在最外层容器（比如 .card-wrapper），而正反面实际在 .card 里面，那中间一层仍是 flat，阴影自然没有 Z 轴落差。
常见错误组合：
-
.card-wrapper { transform-style: preserve-3d; }—— 错，它没直接包着 .front/.back -
.card { transform-style: preserve-3d; }—— ✅ 正确，前提是 .front 和 .back 是它的直接子元素 -
.card { overflow: hidden; }—— ⚠️ 危险，会裁掉旋转时伸出的阴影区域，看起来像“断层”
perspective 值太小或太大，阴影就失真
阴影的深度感依赖透视距离：它决定了 Z 轴位移在视觉上被压缩的程度。值不对，translateZ() 产生的偏移就无法被正确映射为阴影落差。
立即学习“前端免费学习笔记（深入）”；
-
perspective: 200px：阴影拉得太长、边缘发虚，像贴在镜头上 -
perspective: 2000px：阴影几乎不偏移，和没加 3D 一样 - 推荐范围：
perspective: 600px～1000px；移动端可放宽到1200px - 必须设在
.card的父容器上（如.card-container），不能写在.card自身上
阴影要“有厚度”，得靠 translateZ() + box-shadow 配合
纯 box-shadow 只能模拟平面投影；要让阴影随翻转角度变化、有纵深感，必须让卡片本身在 Z 轴上有真实位移，再配合模糊半径与偏移量。
- 正面初始：
.card__front { transform: rotateY(0) translateZ(50px); } - 背面初始：
.card__back { transform: rotateY(180deg) translateZ(50px); } - 卡片容器加：
box-shadow: 0 12px 32px rgba(0,0,0,0.16);（这个值需配合perspective调整） - 别用
z-index控制前后——它在 3D 空间里无效，反而干扰阴影层级
移动端阴影突然变淡或消失
旧版 Safari（iOS 15.4 之前）对 transform-style: preserve-3d 支持不稳定，GPU 加速可能未触发，导致阴影渲染降级为 CPU 绘制，细节丢失。
- 补一句：
.card { -webkit-transform-style: preserve-3d; } - 强制硬件加速：
.card { will-change: transform; } - 避免在
.card上叠加filter（如blur()），它会关闭 GPU 加速，阴影立刻变糊 - 检查是否误用了
backface-visibility: visible—— 它会让背面内容透出，干扰阴影视觉重心
最容易被忽略的一点：阴影的“落点”其实由 transform-origin 决定。如果你改过这个值（比如设成 top center），那 translateZ() 的方向和 box-shadow 的偏移就得同步重调，否则阴影会飘在空中或沉进地面。
