翻转失效主因是 perspective 与 rotateY() 配合错误：perspective 必须设在 .card 的父容器（如 .card-container）上；.card 需设 transform-style: preserve-3d；前后两面须均加 backface-visibility: hidden 及 translateZ(50px) 配合 rotateY(180deg)。
卡片翻转失效、背面消失、内容模糊或左右颠倒，基本都卡在 perspective 和 rotateY() 的配合逻辑上——不是属性没写，而是写错位置或缺关键约束。
perspective 必须设在翻转容器的父级，不能写在 .card 自身上
很多人把 perspective: 1000px 加在 .card 上，结果动画像平面旋转，没有“翻”的纵深感。这是因为 perspective 是为子元素定义观察点距离的，它必须作用在**包含 .card 的外层容器**（比如 .card-container）上。
-
.card-container { perspective: 800px; }✅ 正确：为内部所有 3D 元素提供统一视角 -
.card { perspective: 800px; }❌ 错误：.card自身不是 3D 容器，它的子元素（.front/.back）无法继承该视角 - 值选 600px～1000px 较稳妥；小于 300px 易畸变，大于 2000px 翻转感几近消失
rotateY(180deg) 要配 translateZ()，否则前后两面会重叠或错位
只写 .front { transform: rotateY(0); } 和 .back { transform: rotateY(180deg); }，看起来没问题，但实际运行时两面常在 Z=0 平面堆叠，翻转中出现闪烁或裁剪。根本原因是没给它们分配“厚度”。
- 正确做法是统一加
translateZ(50px)：.front { transform: rotateY(0) translateZ(50px); }.back { transform: rotateY(180deg) translateZ(50px); } - 这个
50px是视觉厚度的一半，值越大翻转越“厚实”，太小（如5px）会导致边缘糊成一线 - 别用
.front { translateZ(-50px) }+.back { translateZ(50px) }—— 这会让两面在 3D 空间里错开基准面，旋转中心偏移
backface-visibility: hidden 必须同时加在前后两面上
不加这句，翻转到 90° 左右时你会看到背面文字镜像透出，尤其在 Safari 和 Chrome 下非常明显。这不是渲染 bug，是浏览器默认行为。
-
.card-face { backface-visibility: hidden; }✅ 必须全局应用，不能只加给.back - 它不影响初始显示，只控制“当元素背面朝向镜头时是否可见”，是翻转效果干净的关键开关
- 值只有
visible和hidden两种，没有过渡或中间态
触发翻转时，只动 rotateY，别混用其他 transform
如果给 .card 同时加了 translateX() 和 rotateY() 动画，尤其在移动端，容易触发渲染异常：闪屏、卡顿、甚至整个 3D 空间塌陷回 2D。
- 确保翻转动画只变更
rotateY值，其他位移/缩放用外层容器控制 - 过渡写法推荐：
transition: transform 0.6s ease;，不要拆成transition: rotateY 0.6s（无效） - JS 控制时，用
element.classList.toggle('is-flipped')比直接操作style.transform更稳定，避免内联样式干扰
最容易被忽略的是：transform-style: preserve-3d 必须设在 .card（即 .front 和 .back 的直接父容器）上，而不是最外层 .card-container。设错一层，整个 3D 空间就没了——连 perspective 和 translateZ 都白配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
