根本原因是未设置 transform-style: preserve-3d，导致子元素在3D空间被压平；需在翻转容器设该属性、背面元素加 backface-visibility: hidden，并避免 overflow: hidden 裁剪。
图片卡片翻转时背面内容显示错乱
根本原因是没设 transform-style: preserve-3d，导致子元素在 3D 空间里被压平，背面旋转后位置和尺寸全乱。父容器（通常是卡片外壳）必须加这句，否则再调 rotateY 也没用。
常见错误现象：翻到一半背面突然“缩进”、文字糊成一团、甚至整个背面消失。
- 只对翻转容器（比如
.card）设transform-style: preserve-3d，别漏掉 - 背面元素（
.card-back）需显式设backface-visibility: hidden，不然翻转过程中前后两面会同时透出 - 避免在翻转容器上同时用
overflow: hidden，它会裁掉 3D 投影溢出部分，造成边缘被砍
移动端翻转卡顿或闪动
本质是浏览器没启用硬件加速，尤其在 iOS Safari 和旧版 Android 浏览器里明显。单纯靠 transition: transform 不够，得“骗”浏览器把该层提到合成层。
使用场景：手指滑动触发翻转、hover 在触摸设备上模拟、或者快速连续翻转时。
立即学习“前端免费学习笔记（深入）”；
- 给翻转容器加
will-change: transform，但别滥用——只在交互前临时加，交互结束移除，否则内存占用高 - 更稳妥的写法是加一个无意义的 3D 位移：
transform: translateZ(0)或transform: translate3d(0, 0, 0) - 避免在
transition中同时动画width、height或opacity，这些触发布局重排，直接拖垮帧率
响应式下翻转轴心偏移、卡片变形
翻转围绕的是元素的 transform-origin，默认是 50% 50% 0（中心点）。但当卡片宽高随屏幕变化、或用了 aspect-ratio + object-fit 拉伸图片时，视觉中心和实际坐标中心就错开了。
参数差异：百分比值按盒模型计算，不是按图片内容；如果卡片有 padding 或 border，也会影响原点定位。
- 统一用
transform-origin: center替代百分比，语义清晰且兼容性好 - 如果卡片内部有绝对定位的标题/按钮，翻转后它们的位置可能“飘走”——确保这些子元素没设
transform，或统一用transform: translateZ(0)对齐图层 - 图片用
img标签时，记得设display: block，否则底部默认留白，会让卡片高度不准
IE11 或低版本 Safari 不支持 3D 翻转
IE11 虽支持 transform，但对 preserve-3d 支持极差；iOS 9.3 以下 Safari 的 backface-visibility 有渲染 bug，常导致背面全黑或闪烁。
性能影响：强行降级为 2D 切换（比如 opacity + z-index）虽兼容，但失去立体感，且无法实现“真实翻页”动效。
- 检测是否支持：用
@supports (transform-style: preserve-3d)包裹 3D 样式，否则 fallback 到淡入淡出 - 不要依赖 JS 检测
document.body.style.transformStyle，IE11 返回空字符串但其实部分支持 - 如果必须保 IE11，用
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)是死路，不如直接放弃翻转，改用 tab 切换
