根本原因是没设 backface-visibility: hidden；必须给正面和背面子元素均添加该属性并配合父容器设置 perspective，同时移动端需用 JS 控制翻转状态。
为什么卡片翻转后背面内容看不见
根本原因是没设 backface-visibility: hidden。CSS 3D 渲染时，元素正反面默认都可见，翻转到背面时浏览器仍会渲染正面内容（只是被“转过去”了），导致视觉上像没翻、或出现重叠伪影。
常见错误现象：transform: rotateY(180deg) 后卡片内容消失、闪烁、或正反面同时显示半透明叠加。
- 必须给翻转的子元素（即正面和背面两个
div）都加backface-visibility: hidden - 只在父容器设
perspective不够，子元素也要独立隐藏背面 - 部分旧版 Safari 需要加
-webkit-backface-visibility: hidden
perspective 放在哪一层才生效
perspective 必须作用于「翻转动画的共同父容器」，不能写在要翻转的卡片本身上。它定义的是观察者到 3D 平面的距离，不是某个元素自己的属性。
使用场景：一个 .card 容器内含 .card-front 和 .card-back，翻转靠 transform: rotateY() 实现。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：给
.card设perspective: 1000px - ❌ 错误：给
.card-front或.card-back单独设perspective - 数值越小（如
300px），翻转透视感越强；越大（如2000px）越接近平面旋转
rotateY 动画卡顿或失真怎么办
本质是浏览器没启用硬件加速，或 transform 属性触发了 layout/reflow。尤其在低配设备或复杂 DOM 下明显。
性能影响：单纯 rotateY 是合成层操作，但若父元素有 overflow: hidden 或 border-radius，可能破坏图层提升。
- 强制开启 GPU 加速：给翻转元素加
transform: translateZ(0)或will-change: transform - 避免在
:hover中直接写长 transform 链，拆成 class 切换更稳定 - 别用
top/left+transition模拟翻转——这不是 3D，且必然重排
/* 推荐的 hover 触发写法 */
.card:hover .card-inner {
transform: rotateY(180deg);
}移动端点击翻转失效的兼容处理
iOS Safari 和部分安卓 WebView 对 :hover 支持极弱，纯 CSS 翻转在触摸设备上基本不响应。
使用场景：需要在手机上点一下翻过去、再点一下翻回来。
- 必须用 JS 切换 class，例如监听
click或touchstart，然后增删is-flipped - 别依赖
pointer-events: none来禁用背面交互——它不阻止事件穿透，反而让点击失效 - 给背面元素加
pointer-events: auto（默认是 inherit），确保翻过去后能点到背面按钮
复杂点在于：3D 翻转本身没问题，但「谁来触发」「何时触发」「触发后状态是否持久」，这些逻辑全得 JS 控制。CSS 只管动效，别让它背交互的锅。
