perspective 必须设在父容器上并配合 transform-style: preserve-3d 和 backface-visibility: hidden 才能实现真正 3D 翻转；三者缺一不可，否则翻转失效或视觉错乱。
直接加 perspective 不起作用，是因为它只提供观察距离，不自动开启 3D 空间渲染——必须配合 transform-style: preserve-3d 和 backface-visibility: hidden 才能真正翻转出背面。
perspective 必须设在父容器上，不能写在翻转元素自身
很多人把 perspective: 1000px 写在 .card 上，结果翻转像贴纸一样扁平。这是因为 perspective 是为子元素建立 3D 视图空间的“观察点”，它得作用于翻转动作的**父级容器**（比如 .card-container），让内部的正反面能在同一 3D 坐标系中相对旋转。
-
.card-container { perspective: 800px; }✅ 正确：为 .card 及其子元素创建 3D 空间 -
.card { perspective: 800px; transform: rotateY(180deg); }❌ 无效：perspective 对自身 transform 无影响 - 值选 600–1200px 比较稳妥；太小（如 100px）会让翻转夸张变形，太大（如 3000px）几乎看不出 3D 感
transform-style: preserve-3d 是翻转生效的前提
没有它，.card 的子元素（.card-front / .card-back）会被强制压平到同一个 Z=0 平面，rotateY(180deg) 后两者依然重叠，背面永远穿不过来。
- 必须加在直接包裹正反面的容器上，通常是
.card或.card-inner - 常见错误：只加了
perspective却漏掉这行，翻转时只看到正面消失、背面闪现，或完全不动 - 该属性不可继承，父级设了
preserve-3d，子级若再嵌套 3D 元素，仍需单独设置
backface-visibility: hidden 防止正反面视觉错乱
不加这个，翻转到一半时正反面会同时显示，尤其在快速悬停或移动端 touch 时出现“双影”或内容撕裂。
立即学习“前端免费学习笔记（深入）”；
- 必须加在正反面元素自身上：
.card-front, .card-back { backface-visibility: hidden; } - 它不是动画控制开关，而是渲染层开关：当元素 Z 轴朝向用户为负（即背面朝前）时，整个元素被裁剪掉
- 移动端 Safari 旧版本对
backface-visibility支持不稳定，可加-webkit-backface-visibility兜底
transition 和 transform-origin 容易被忽略的细节
翻转卡顿、偏移中心、动画不连贯，往往不是 perspective 的问题，而是这两个属性没配好。
-
transition要写在被变换的元素上（即.card），不是写在:hover伪类里 -
transform-origin: center是默认值，但若卡片有 padding/margin 或用了 flex 布局，实际旋转中心可能偏移；建议显式声明transform-origin: 50% 50% - 用
cubic-bezier(0.4, 0, 0.2, 1)替代ease，更接近真实翻页的加速-减速感
真正卡住的点从来不是 perspective 值调多少，而是三层结构是否完整：容器有 perspective → 卡片有 transform-style → 正反面有 backface-visibility。少一个，3D 就塌回 2D。
