卡片悬停反转卡住需开启3d上下文：父容器设perspective，卡片设transform-style: preserve-3d；避免translatez引发模糊，优先用rotatey+backface-visibility；transition须写在默认样式中；ie/safari旧版应降级为opacity切换。
卡片悬停反转卡在平面不动？检查 transform-style 和父容器 perspective
3D 反转不是加个 rotateY(180deg) 就完事——浏览器默认把子元素渲染在同一个平面，反转后正反面叠在一起，看起来像没动。关键得让父容器开启 3D 上下文。
-
transform-style: preserve-3d必须加在卡片容器（比如.card）上，不能只加在翻转的正面/背面元素上 -
perspective建议设在更外层（比如.card-wrapper），值在600px～1000px较自然；设太小会畸变，设太大则反转感弱 - 如果卡片用
overflow: hidden，确保它没裁掉正在旋转的背面——背面需和正面尺寸一致，且用backface-visibility: hidden防闪烁
反转后内容模糊或锯齿？别乱用 translateZ
很多教程一上来就给正面加 translateZ(50px)、背面加 translateZ(-50px)，结果字体发虚、边线抖动。这不是 bug，是硬件加速强制走 GPU 渲染时的亚像素采样副作用。
- 优先用纯
rotateY(180deg)+backface-visibility: hidden实现，不引入额外位移 - 真需要 Z 轴偏移（比如做立体卡片堆叠），
translateZ值控制在20px以内，超过后模糊明显加剧 - 若仍模糊，可对翻转元素加
will-change: transform提前提示渲染引擎，但别滥用——每个都加会拖慢页面
鼠标移入移出闪动、反转不连贯？transition 放错地方了
反转动画卡顿或中途跳回，大概率是 transition 写在了伪类（如 :hover）里，而不是初始状态上。
-
transition: transform 0.4s ease必须写在卡片默认样式（非:hover）中，否则移出时没有过渡，直接“啪”一下切回 - 避免同时过渡多个属性（比如
transform+opacity），不同属性帧率可能不一致，导致撕裂感 - 移动端要注意：
:hover在 iOS Safari 上有延迟或不触发，得补touchstart事件或改用focus-within模拟
IE 或旧版 Safari 不支持？别硬扛，降级要明确
IE 完全不支持 preserve-3d，Safari 12 之前对 backface-visibility 支持不稳定。强行兼容只会让代码臃肿、行为不可控。
- 用
@supports (transform-style: preserve-3d)包裹 3D 样式，不支持时 fallback 到淡入淡出或上下滑动 - 不要试图用 JS 检测
transform-style是否生效——CSS 支持检测本身就有兼容问题，老老实实写 CSS @supports 更可靠 - 如果项目必须支持 IE11，直接放弃 3D 反转，用
opacity+visibility切换两层内容，体验差距比崩溃强得多
最常被忽略的是：反转卡片的子元素（比如图片、文字）如果用了 position: absolute，它的定位参考系仍是原始坐标，旋转后可能跑偏——得统一用 transform 做内部微调，而不是依赖 top/left
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
