css 3d翻转卡片需perspective与transform-style: preserve-3d协同作用：perspective须设于共同父容器，transform-style加在直接包裹正反面的容器上，backface-visibility: hidden必须作用于正反两面，且transition需定义初始transform值而非none。
perspective 不是加了就能出 3D 感的开关，它必须和 transform-style: preserve-3d 配合、写在正确父容器上，否则翻转/位移都只是平面动画。
perspective 必须设在共同父容器上，不能写在卡片自身
很多人把 perspective: 1000px 直接加在 .card 上，结果 hover 时只有旋转、没有近大远小的纵深感——因为 perspective 定义的是「观察者眼睛到 z=0 平面的距离」，它只对**子元素**生效，且需由父级提供统一视觉原点。
- ✅ 正确结构：
.cards-grid { perspective: 1000px; transform-style: preserve-3d; }，再让.card做transform: rotateY(180deg) - ❌ 错误写法：
.card { perspective: 1000px; transform: rotateY(180deg); }→ 浏览器忽略perspective，旋转无缩放 - ⚠️ 移动端 Safari 对
perspective位置极其敏感；若用body或html作为容器，可能引发position: fixed元素错位，务必单独包裹一层如.scene
transform-style: preserve-3d 只对直系子元素生效
它的作用不是“开启 3D”，而是阻止浏览器把子元素拍平到同一 Z=0 平面。但它不穿透嵌套，加错位置等于没加。
- ✅ 正确：加在直接包裹正反面的容器上，例如
.card或.card-inner - ❌ 错误：加在
.card-front或.card-back上——它们是叶子节点，没有子元素需要“保持 3D” - ⚠️ 常见干扰：
overflow: hidden的父容器会裁掉翻转中伸出的背面，看起来像卡住；transform-style: flat（默认值）的祖先也会覆盖掉效果
backface-visibility: hidden 必须同时作用于正反两面
翻转到 180° 时，正面和背面在空间中重叠。不隐藏背面，Chrome/Safari 会同时渲染两层，导致文字重影、颜色发灰，甚至 iOS 上直接显示空白。
- ✅ 必须写：
.card-front, .card-back { backface-visibility: hidden; } - ❌ 只加在容器上无效；加在
:hover里更不行——它得始终生效 - ⚠️ 旧版 iOS Safari 对
backface-visibility支持不稳定；若翻转后消失，可补一句transform: translateZ(0)强制触发 GPU 渲染
transition 必须写在默认状态，且初始 transform 不能为 none
过渡只在属性值变化时触发。transform 是可动画属性，但若初始值是 none，浏览器无法插值计算中间态，动画就断了。
- ✅ 正确：
.card { transform: rotateY(0deg); transition: transform 0.4s ease; }+.card:hover { transform: rotateY(180deg); } - ❌ 错误：
.card { transform: none; }→ hover 动画不执行 - ⚠️ 性能建议：避免
transition: all；优先只过渡transform和opacity，减少重排重绘
真正难调的不是写几行 CSS，而是理解 perspective 和 transform-style 的协作边界——它们不是独立开关，而是一组必须同时满足的上下文条件。漏掉任意一个，3D 就塌回 2D。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
