card翻转时内容消失或错位
根本原因是 transform-style: preserve-3d 没加在父容器上，导致子元素的3D变换被扁平化。没有它，rotateY 看起来像单纯缩放或裁剪，背面内容直接不可见。
- 翻转容器（如
.card）必须设transform-style: preserve-3d - 它的父级如果设置了
overflow: hidden，会裁掉旋转后伸出的背面区域，得改成overflow: visible或用clip-path精控 - 背面元素记得加
backface-visibility: hidden，否则翻转中途可能双面同时显示（尤其 Safari）
移动端触摸翻转不灵敏或触发异常
CSS 3D翻转本身不响应点击/触摸，靠 JS 绑定事件切换 class 是主流做法，但容易忽略 touch 事件穿透和过渡阻塞。
- 给正面/背面都加
cursor: pointer和-webkit-tap-highlight-color: transparent，避免 iOS 点击闪白 - 别用
:hover做翻转——移动端没 hover；改用.card.is-flipped类控制transform: rotateY(180deg) - 翻转动画时间别设太长（建议 ≤ 400ms），否则连续点击时
transition还在跑，状态不同步
响应式断点下翻转轴心偏移
默认 transform-origin 是居中（50% 50%），但卡片宽度随屏幕变化时，若内部内容 padding/margin 不等比缩放，视觉上就像“转歪了”。
- 显式写死
transform-origin: center center，别依赖默认值 - 确保正面和背面的
width/height完全一致，哪怕用aspect-ratio控制（注意 Safari 15.4+ 才支持） - 小屏下慎用
font-size百分比缩放，文字撑开高度会导致transform-origin实际位置漂移
Firefox 中 3D 翻转卡顿或闪烁
Firefox 对 will-change: transform 的优化不如 Chrome/Safari，盲目开启反而引发重绘抖动。
立即学习“前端免费学习笔记（深入）”；
- 只对翻转容器（
.card）加will-change: transform，不要加到内部文字或图片上 - 避免同时对多个卡片批量加 class 触发翻转——用
requestAnimationFrame节流，或加transition-delay错峰 - 如果卡片含
box-shadow，小屏下建议降级为filter: drop-shadow()，减少层叠上下文开销
.card.is-flipped .card-inner { transform: rotateY(180deg); }，但真正卡住人的永远是那几个隐藏的渲染层规则和跨浏览器的定位偏差。别急着调角度，先盯住 transform-style 和 overflow。 
