不加 backface-visibility: hidden 会导致翻转至90°时文字镜像透出、重叠或闪烁；必须同时为.card-front和.card-back设置该属性，且需配合transform-style: preserve-3d、含z轴的transform及外层perspective才能生效。
不加 backface-visibility: hidden，翻转到 90° 左右就会看到文字镜像透出、重叠或闪烁——这不是“效果不好”，而是渲染逻辑崩了。
为什么只给背面加 backface-visibility: hidden 不行
浏览器不会自动判断“哪一面是当前背面”。它只按规则处理：每个元素的背面是否渲染，由它自己声明的 backface-visibility 决定。翻转过程中，.card-front 在 90°–270° 区间自身就变成了“背面”，如果它没设 hidden，它的背面像素就会和 .card-back 的正面像素同时朝前渲染，造成双层文字叠加、镜像穿底。
必须这样写：
.card-front, .card-back {
backface-visibility: hidden;
}
- 不能只写
.card-back { backface-visibility: hidden; } - 不能写在父容器
.card上——该属性不继承，也不作用于子元素 - 旧版 Safari 和部分安卓 WebView（Chromium 90–99）必须补
-webkit-backface-visibility: hidden;
backface-visibility 生效的前提条件
这个属性不是设了就起作用。它只在真实 3D 渲染上下文中激活，缺一不可：
-
transform必须含 Z 轴分量：比如rotateY(180deg)、rotateX(180deg)或translateZ(0)；纯rotate(180deg)（2D）直接忽略该属性 - 直接包裹正反面的容器（如
.card）必须设transform-style: preserve-3d；设错层级（比如设在body或.card-container）会导致整个子树被拍平成 2D -
perspective必须写在更外层容器（如.card-container或网格父级），数值推荐 300–1200px；写在.card自身上无效，且太小（如 200px）易抖动，太大（如 5000px）失去景深感
移动端真机翻转闪一下，大概率是这三件事漏了
很多页面在桌面 Chrome 看着正常，一上 iPhone 或安卓微信就闪，问题往往藏在细节里：
- 没给正反两面都加
-webkit-backface-visibility: hidden——微信 X5 内核、UC 浏览器等仍依赖前缀 -
transition错绑在.card-front和.card-back上，而不是统一绑在.card容器上，导致正反面动画不同步、撕裂 - 用
display: none或v-show控制显隐来“切换”翻转状态——这会销毁图层，backface-visibility失效；应改用opacity: 0+pointer-events: none配合类切换
最容易被忽略的点是：翻转动画“看起来能动”，不等于结构正确。只要漏掉任意一个前提（比如 preserve-3d 挂错父级，或 backface-visibility 少写一面），在 Safari 或部分 WebView 中就一定会穿模——它不是 bug，是 CSS 3D 渲染标准行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
