根本原因是transform: rotatey(180deg)使背面脱离文档流但仍受父网格项约束，且未设backface-visibility: hidden导致缓存复用错乱；须加perspective、绝对定位、hidden背侧、固定宽高比及显式transform-origin。
卡片翻转时背面内容错位或溢出网格
根本原因是 transform: rotateY(180deg) 后，背面元素的渲染层脱离了原始文档流，但它的尺寸和定位仍受父网格项约束；若没显式设 backface-visibility: hidden，浏览器可能复用正面缓存，导致视觉错乱。
- 给翻转容器（即网格项）加
perspective: 1000px，值太小会夸张变形，太大则翻转不明显 - 正反面都必须设
position: absolute; top: 0; left: 0; width: 100%; height: 100%，否则它们会按默认流式布局叠加错开 - 务必在正反面元素上都加
backface-visibility: hidden，否则 Safari 和旧版 Chrome 可能显示“双面重影”
CSS Grid 与 transform 冲突导致翻转卡顿或跳变
Grid 的 grid-template-areas 或 grid-column / grid-row 定义的是布局空间，而 transform 是绘制层操作——两者不在同一阶段生效。如果翻转动画中动态改网格属性（比如用 JS 切换 grid-area），会触发回流，打断 GPU 加速。
- 翻转动画只用
transform+transition，绝对不要在动画过程中修改grid-column、grid-area等布局属性 - 确保翻转容器本身是网格直接子项（即
display: grid的直系div），避免中间嵌套flex或inline元素干扰层叠上下文 - 在背面元素上加
will-change: transform（仅需加一次，别滥用），可提前提示浏览器启用独立图层
响应式下翻转卡片网格塌陷或比例失常
网格轨道（grid-template-columns）用 fr 单位时，容器宽高比不固定，而翻转卡片通常依赖等宽高等比例设计。一旦网格项被压缩，transform-origin 默认居中就可能让旋转轴偏移。
- 给网格项设
aspect-ratio: 1/1（支持现代浏览器）或用padding-top: 100%+position: relative模拟，锁定宽高比 - 翻转容器的
transform-origin显式写成transform-origin: center center，避免不同浏览器对默认值解析差异 - 媒体查询中调整网格列数时，同步检查
gap值是否过大——过大的gap会让单个网格项实际可用空间骤减，挤压翻转区域
JS 控制翻转状态时 class 切换失效或不同步
常见于用 classList.toggle('is-flipped') 但 CSS 中没匹配到对应选择器，或多个卡片共用同一状态变量导致互相覆盖。
立即学习“前端免费学习笔记（深入）”；
- CSS 翻转规则必须基于类名，例如
.card.is-flipped .card__face--back，不能只靠伪类或父子选择器猜状态 - 每个卡片的翻转状态要独立维护，别用全局布尔值；推荐用
element.dataset.flipped = 'true'配合属性选择器[data-flipped="true"] - 监听点击时，优先用事件委托（如绑定到网格容器），再用
e.target.closest('.card')定位，避免重复绑定和内存泄漏
backface-visibility 和 transform-origin 的组合效果，尤其在缩放或移动端 viewport 缩放后。 
