翻转后背面透出或文字闪烁是因为backface-visibility:hidden未同时加在.card__front和.card__back上；该属性控制各元素自身背面是否渲染，翻转至90°时.front背面与.back正面同时朝前，仅设.back会导致双面叠加透底。
为什么翻转后背面透出或文字闪烁？
根本不是动画写错了，而是 backface-visibility: hidden 没加在正反两面元素上。该属性控制的是「自身背面是否渲染」，不是「当前朝外的面是否显示」。翻转到 90° 时，.card__front 的背面和 .card__back 的正面同时朝前——只给背面加，正面背面都会透底。
必须这样写：
.card__front, .card__back {
backface-visibility: hidden;
}
- 不能只写
.card__back { backface-visibility: hidden; } - 不能写在父容器
.card上——它不继承，也不作用于子元素 - 旧版 Safari 需补
-webkit-backface-visibility: hidden;
position: absolute 叠放正反面为什么必须配 position: relative？
top: 0; left: 0; 是相对于「最近的已定位祖先」计算的。如果包裹 .card__front 和 .card__back 的容器（比如 .card）没设 position: relative，它们就会飞到视口左上角，多个卡片全叠在一起，hover 失效、z-index 错乱。
-
.card必须设position: relative，且有明确宽高（如width: 300px; height: 400px;） - 若
.card是 grid 子项，别在它上面写top/left——这会让它脱离 grid track；改用place-self或justify-self - 正反面都要设
position: absolute; top: 0; left: 0; width: 100%; height: 100%;，否则内容错位、边缘露白
perspective 和 transform-style: preserve-3d 写在哪才生效？
perspective 控制 3D 空间景深，transform-style: preserve-3d 告诉浏览器“子元素要保有自己的 Z 轴位置”。写错位置，rotateY 就被压成 2D，背面直接不可见。
-
perspective: 1000px加在翻转容器的父级（如网格容器.grid），数值推荐 300–1200px：卡片越小，值越小 -
transform-style: preserve-3d加在**直接包裹正反面的容器**上（即.card），不能加在更外层或 body 上 - 别把
perspective和transform都写在.card__front上——每个面各自有 perspective，空间关系彻底混乱
移动端点击失效或翻转卡顿怎么修？
iOS Safari 和部分安卓 WebView 对 rotateX / rotateY 的事件捕获很敏感，常表现为点击无响应、hover 不触发、动画掉帧。
- 确保翻转容器（
.card）设了perspective，否则 3D 上下文丢失，浏览器降级处理 - 避免在
.card或网格容器上写will-change: transform——Safari 渲染异常风险高；只在.card__front和.card__back上加 - 过渡时间控制在 300ms–450ms；太短突兀，太长易被浏览器降级为软件渲染
- 纯 CSS
:hover在移动端无效，需用 JS 监听click或touchstart切换 class
backface-visibility: hidden 和 transform-style: preserve-3d 的作用对象必须严格对应——前者管子元素渲染，后者管父容器的 3D 上下文，两者缺一不可，且谁写在哪，差一层就全崩。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
