必须用position: absolute叠放正反面以确保严丝合缝重叠，避免翻转错位；backface-visibility: hidden需同时作用于正反两面，否则翻转后会出现内容穿透、抖动或露白。
为什么用 position: absolute 叠正反面是必须的
卡片翻转要「严丝合缝」对齐，不能靠 margin 或 flex 推挤——因为 transform: rotateX(180deg) 是绕 X 轴旋转，上下翻转时若正反面存在布局偏移，会直接导致视觉错位、边缘露白或内容抖动。position: absolute 配合 top: 0; left: 0; width: 100%; height: 100% 才能确保两者完全重叠，且不受父容器内流式布局干扰。
常见错误现象：
– 正面有 padding，背面没设相同 padding，翻转后内容上下跳动
– 父容器用了 display: flex 但没设 align-items: center，导致绝对定位后垂直居中失效
– 忘记给父容器设固定宽高（如 width: 300px; height: 400px），absolute 子元素会塌陷成 0×0
backface-visibility: hidden 必须加在正反两面，不是只加背面
很多人以为“背面要隐藏，所以只给 .card__back 加 backface-visibility: hidden”，结果翻转后正面文字仍可被选中、点击穿透到背面——这是因为：该属性控制的是「当前元素自身背面是否渲染」，而翻转时，正面元素的背面朝外，它自己也要隐藏；背面元素同理。不加在正面，它的背面在翻转 180° 后就变成朝前了。
实操建议：
– 统一用类名如 .card__face 同时作用于正反两面，并在其上写 backface-visibility: hidden
– 切勿依赖继承或父容器设置，该属性不继承
– Safari transform: translateZ(0) 强制硬件加速
立即学习“前端免费学习笔记（深入）”；
垂直翻转（rotateX）和水平翻转（rotateY）的关键区别
垂直翻转用 rotateX(180deg)，意味着绕水平中轴线翻，像书本上下掀页；这要求整个 3D 空间正确建立，否则会降级为 2D 动画、背面照常显示。
必须同步满足：
– 父容器（如 .card）设 perspective: 1000px（值太小会夸张变形，太大则无纵深感）
– 父容器设 transform-style: preserve-3d，否则子元素的 rotateX 会被压平
– 正面初始 transform: rotateX(0)，背面初始 transform: rotateX(180deg)，两者旋转轴严格一致
– 不要用 rotate(180deg) 简写，它等价于 rotateZ，会导致翻转方向错误
移动端点击失效或翻转卡顿的典型原因
iOS Safari 和部分安卓 WebView 对 rotateX 的事件捕获很敏感：翻转后背面区域可能无法响应 click，或者 hover 效果在 touch 设备上完全不触发。
排查要点：
– 检查是否遗漏 perspective：没有它，3D 变换深度信息丢失，浏览器会丢弃背面渲染逻辑
– 正反面元素是否设了 width 和 height：仅靠 100% 在某些 Webview 下会计算为 0
– 是否用 :hover 触发：移动端无 hover 状态，必须改用 click + JS 切换 class（例如监听 touchstart 防延迟）
– 某些老版本 UC 或 QQ 浏览器不支持 preserve-3d，需 fallback 到淡入淡出动画
最易被忽略的一点：rotateX 垂直翻转时，如果卡片内容高度不固定（比如文字行数动态变化），height: 100% 会失效，必须显式设定容器高度，否则翻转过程会拉伸/压缩——这不是动画 bug，是布局塌陷本身的问题。
