翻牌动画失败主因是3D渲染配置错误：必须为前后两面均设backface-visibility:hidden，且在直接包裹容器上启用transform-style:preserve-3d并设明确宽高。
翻牌动画做不出来，八成是 backface-visibility 没设对，或者根本没启用 3D 渲染上下文——它不是锦上添花的装饰属性，而是翻转能“成立”的前提。
为什么加了 rotateY(180deg) 还看不到背面？
因为浏览器默认把背面当“镜像贴纸”一起渲染，backface-visibility 默认值是 visible，不是 hidden。不显式声明，翻到一半时正面和背面会同时透出，尤其在 Chrome 和 Safari 下非常明显。
- 必须给**前后两个面**都加
backface-visibility: hidden，只加背面没用 - 它只在有
transform且启用 3D（比如含rotateY、translateZ(0)）时才生效；纯rotate(180deg)（2D）不会触发 - 如果背面内容“一闪就消失”，大概率是父容器用了
overflow: hidden，裁掉了 Z 轴延伸部分
transform-style: preserve-3d 必须设在哪个元素上？
必须设在**包裹前后两面的直接父容器**上，比如 .card-inner 或 .flip-card-inner。这个容器负责提供 3D 空间，子元素（正面/背面）才能真正“绕 Y 轴旋转”，而不是被压平成 2D 平面。
- 设错位置（比如只设在最外层
.card，但两面不在它直系子级）会导致翻转错位、缩进、甚至整个背面不可见 - IE11 对
preserve-3d支持极差，iOS 9.3 以下 Safari 有渲染 bug（背面全黑或闪烁），需降级 fallback - 别漏掉：这个容器还得有明确宽高，否则内部
position: absolute的两面会塌陷
移动端点击翻转没反应，是不是 JS 写错了？
更可能是手势被拦截了。iOS Safari 和部分安卓浏览器默认禁用 :hover，也不响应普通 click，除非你主动告诉它“这里要交互”。
立即学习“前端免费学习笔记（深入）”；
- 给卡片容器加
touch-action: manipulation，允许点击类操作（避免被双指缩放等手势劫持） - JS 切换 class 时，别用
display: none控制背面——这会让 3D 变换彻底失效；改用visibility: hidden+pointer-events: none - 监听
touchstart而非click更可靠，尤其在快速连续翻转场景下
动画卡顿或边缘被砍，该调哪些渲染参数？
翻转本质是高频 3D 变换，浏览器若没提前准备合成层，就会掉帧、闪动、边缘裁切。
- 给翻转容器加
will-change: transform，但仅在交互开始前动态添加，结束后移除，否则内存占用高 - 更稳妥的做法是加个无意义的 3D 位移：
transform: translateZ(0)或transform: translate3d(0, 0, 0)，强制 GPU 加速 - 别在
transition里混入width、height、opacity——这些触发布局重排或软件合成，直接拖垮帧率
最易被忽略的一点：翻转轴心默认是 50% 50% 0（中心点），但如果你用了 aspect-ratio、object-fit 或带 padding 的卡片，视觉中心和坐标中心就偏了——这时候得显式写 transform-origin: center，而不是依赖百分比值。
