必须给前后两面都加 backface-visibility: hidden，否则翻转至90°–270°区间时.front自身变为背面，其未隐藏的背面会与.back正面叠加，导致透底、镜像或闪烁；该属性须分别作用于.card-front和.card-back，不可省略任一，也不能写在父容器上。
必须给前后两面都加 backface-visibility: hidden，否则翻转时会透底、镜像、闪烁——这不是兼容性问题，是 CSS 3D 渲染标准行为。
为什么只加在 .back 上不行
翻转过程中，.front 在旋转到 90°–270° 区间时，自身就变成了“背面”，此时它的背面像素若未被隐藏，就会和 .back 的正面叠加显示。浏览器不会自动判断“哪个是当前背面”，它只按规则渲染：每个元素的背面是否可见，由它自己的 backface-visibility 决定。
常见错误写法：.back { backface-visibility: hidden; }，而 .front 完全没设——结果就是翻转卡在中间角度时，看到正面文字+背面镜像重叠。
- 必须同时写：
.card-front, .card-back { backface-visibility: hidden; } - 不能写在父容器上（如
.card），该属性对子元素无效 - 不能用
opacity: 0或visibility: hidden替代，这会破坏 3D 空间层级，导致翻转错位甚至消失
移动端点击翻转时 backface-visibility 失效怎么办
部分安卓 WebView（尤其是微信内置浏览器）对 backface-visibility 支持不完整，即使写了也可能透出。这时需要兜底：
- 加上
-webkit-backface-visibility: hidden，放在前后两面样式里 - 避免仅依赖
:hover，改用 JS 切换类（如.is-flipped），并确保该类触发的是.card的transform: rotateY(180deg)，而不是显隐切换 - 不要用
:active模拟点击翻转——它只在触摸瞬间生效，松手立即回弹，无法保持状态
backface-visibility: hidden 和 transform-style: preserve-3d 的关系
这两个属性缺一不可，但作用对象不同：
-
transform-style: preserve-3d必须设在直接包裹前后两面的容器上（比如.card或.flipper），不是最外层.card-container -
backface-visibility: hidden必须设在前后两面本身（.card-front和.card-back），且不能省略任意一个 - 如果
preserve-3d设错位置（例如设在 body 或 .card-container），即使backface-visibility全写了，3D 空间也塌陷成 2D，翻转变成平面旋转，失去景深感
最容易被忽略的一点：翻转动画是否“看起来正常”，不等于“结构正确”。很多页面在 Chrome 里看着没问题，但在 Safari 或微信里一翻就穿模——问题往往出在 backface-visibility 漏写，或 preserve-3d 挂错了父级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
