必须给正反两面都加backface-visibility: hidden，否则翻转中段.front背面会透出导致镜像叠加；该属性控制自身背面是否渲染，不继承，须显式作用于.card-front和.card-back。
必须给正反两面都加 backface-visibility: hidden，否则背面内容一定会穿透正面——这不是兼容性问题，是浏览器渲染规则本身决定的。
为什么只加背面的 backface-visibility: hidden 不行
该属性控制的是「元素自身背面是否渲染」，不是「当前哪一面朝前」。翻转过程中，.card-front 的背面会短暂朝向用户，.card-back 的正面也会朝前；如果只给 .card-back 加该声明，.card-front 的背面依然会被绘制并透出文字或背景色。
-
.card-front, .card-back { backface-visibility: hidden; }必须共用同一组选择器，不能拆开写 - 该属性不继承，父容器设了没用，必须显式作用于两个面元素
- Safari 和 Chrome 在翻转中段最明显：你会看到正面文字“镜像”叠在背面内容上
perspective 和 transform-style: preserve-3d 该写在哪一层
写错层级会导致 rotateY 像被压扁一样失真，甚至完全不翻转——浏览器直接当 2D 处理。
-
perspective: 1000px必须加在 Grid 容器（如.grid-container）或每张卡片的直接父容器（如.card）上，不能加在.card-inner或.card-front上 -
transform-style: preserve-3d必须加在执行旋转的容器上，通常是包裹正反面的中间层（如.card-inner），不是外层.card - 若卡片是
display: grid的直接子项，别在.card上写position: relative——这会让它脱离 grid track；改用place-self或确保其父 grid 容器已设好perspective
Grid 布局下卡片定位错位、背面消失的常见原因
背面内容“不见了”或“飞到左上角”，通常不是动画写错了，而是定位上下文缺失。
- 正反面元素（
.card-front和.card-back）必须用position: absolute，且它们的**直接父容器**（如.card-inner）必须设position: relative，否则它们会相对于视口定位 - 该父容器（如
.card-inner）必须有明确宽高，否则absolute子元素会塌陷为 0×0，导致背面不可见 - 不要用
display: none控制背面显隐——它会把元素彻底移出渲染流，3D 变换失效；改用visibility: hidden+pointer-events: none（但更推荐靠backface-visibility自然控制）
移动端点击翻转失效的修复方式
iOS 和 Android 默认不触发 :hover，点一下就卡住，不是 bug，是规范行为。
- 别用
ontouchstart立即翻转——快速连点会导致状态错乱；推荐统一用click+classList.toggle('is-flipped') - 给卡片加
tabindex="0"，既支持键盘聚焦，也能让 Safari 正确响应点击事件 - 避免在 Flex/Grid 容器内直接设
transform-style: preserve-3d：Safari 有已知兼容问题，可在外层套一层div并设display: block; position: relative;
真正容易被忽略的是：perspective 值和卡片尺寸的匹配关系。一张宽 200px 的卡片，用 perspective: 5000px 几乎看不出翻转立体感；而 perspective: 200px 又会让背面严重畸变。实际项目里建议从 1200px 起调，再按卡片大小微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
