卡片翻转动画必须设置 transform-style: preserve-3d 才能实现真 3d 效果，否则仅平面旋转；父容器需加该属性及 perspective，正背面需 absolute 定位对齐，背面初始化 rotatey(180deg)，transition 写在容器上，移动端需 js 触发 class 切换，ie11 需降级为 opacity 切换。
卡片翻转动画必须用 transform-style: preserve-3d
不加这句，rotateY 或 rotateX 在子元素上根本不会产生 3D 翻转效果，只会平面旋转——这是最常见的失败原因。父容器（通常是卡片外层 wrapper）必须设 transform-style: preserve-3d，否则浏览器会扁平化渲染，背面内容永远不可见。
实操建议：
- 翻转容器（比如
.card）设transform-style: preserve-3d和perspective: 1000px（值越小翻转越“近”，越大越“远”） - 正面和背面两个面都需设
position: absolute，且宽高一致、top: 0; left: 0;对齐 - 背面元素要加
transform: rotateY(180deg)初始化为反向，否则翻转后内容是镜像的 - 避免给背面元素设
backface-visibility: hidden—— 这会导致背面在翻转中途消失，只应在需要隐藏未翻转时的背面时才用
hover 触发翻转时，transition 要写在翻转容器上，不是单个面
把 transition: transform 0.6s ease 写在 .card 上，而不是 .card__front 或 .card__back。否则只有该面自身动，整个卡片结构不响应，视觉上会错位或卡顿。
常见错误现象：鼠标悬停时正面旋转了，背面不动；或者背面突然跳到新位置，没有过渡。
正确写法示例：
.card {
transition: transform 0.6s ease;
}
.card:hover {
transform: rotateY(180deg);
}
移动端 touch 事件翻转需额外处理 pointer-events
纯 :hover 在 iOS Safari 和部分安卓浏览器里不触发，尤其微信内嵌 WebView。必须补充 JavaScript 绑定 touchstart 或 click，并切换一个 class（如 is-flipped）来控制状态。
关键细节：
- 给卡片加
cursor: pointer和user-select: none防止误选文字干扰 - 用
classList.toggle('is-flipped')切换，不要直接操作style.transform，否则破坏 CSS 过渡 - 避免在
touchstart后立刻preventDefault()，否则可能影响滚动——只在需要阻止默认行为时谨慎使用 - 如果卡片内有可点击子元素（如按钮），需确保
pointer-events: auto在它们身上，否则点击失效
IE11 及更老浏览器不支持 preserve-3d，得降级为淡入淡出
IE11 渲染 transform-style: preserve-3d 为 flat，翻转动画会退化成正面缩放 + 背面淡入，视觉上不是真翻转。不能硬扛，得主动检测并降级。
判断方式简单有效：
- 检查
getComputedStyle(element).transformStyle是否为preserve-3d（IE 返回flat） - 或直接用
@supports (transform-style: preserve-3d)写 CSS 条件规则 - 降级方案：去掉 3D 属性，改用
opacity+visibility切换两面，配合transition实现类翻转感
真 3D 翻转在现代浏览器里很稳，但别忘了那个看不见的 IE 用户——他看到的是淡入淡出，不是 bug，是预期行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
