卡片翻转需设 transform-style: preserve-3d、backface-visibility: visible、perspective 及 will-change: transform，用类名切换替代 :hover 触发，并注意 transform-origin 与设备适配。
直接用 transform: rotateY() 做卡片翻转，90% 的人会卡在背面不可见、翻转卡顿、或鼠标移入多次触发抖动上。
为什么卡片翻转后背面是空的或看不见
根本原因是：CSS 默认开启背面裁剪（backface-visibility: hidden），且 rotateY(180deg) 后，背面元素默认不渲染——除非你显式设置 backface-visibility: visible 并确保正反面都有内容。
- 必须给卡片容器（如
.card）加transform-style: preserve-3d，否则子元素的 3D 变换会被扁平化 - 正反两面（
.card__front和.card__back）都要设backface-visibility: visible，否则翻转到 90°–180° 区间时可能突然消失 - 背面元素不能只靠
z-index控制层级——3D 空间里它得靠transform: translateZ()“推”到正面之后（比如translateZ(-100px)），否则视觉错位
翻转动画卡顿或跳变的常见原因
动画不流畅往往不是因为 rotateY 本身，而是触发条件和硬件加速没配对。
- 务必给翻转容器加
will-change: transform，尤其在 Chrome/Firefox 中能显著减少闪烁和掉帧 - 不要用
:hover直接驱动rotateY(180deg)—— 多次快速进出会积累过渡队列，改用transition: transform 0.6s cubic-bezier(0.5, 0, 0.5, 1)+ 类名切换（如.is-flipped）更可控 - 避免同时过渡多个属性（比如
transform+opacity），会触发重排；如果要淡入淡出，把opacity放在正反面各自内部过渡
移动端点击翻转失效或响应迟钝
iOS Safari 和部分安卓 WebView 对 hover 支持极弱，且 transform 在低性能设备上容易被降级为软件渲染。
立即学习“前端免费学习笔记（深入）”；
- 用
@media (hover: hover)区分悬停设备，对触屏设备改用click或touchend事件控制.is-flipped类 - 确保卡片父容器有明确的
perspective（比如perspective: 1000px），值太小（如100px）会让翻转看起来像“压扁”，太大（如5000px）又几乎看不出 3D 感 - 慎用
transform: rotateY(180deg)配合scale动画——某些低端 Android 会因矩阵计算错误导致背面拉伸变形
最易被忽略的一点：翻转动画的“轴心点”默认是元素中心（transform-origin: 50% 50%）。如果你希望绕顶部边缘翻转（像书页），得手动设 transform-origin: top center，否则整个动画会漂移。这个值一旦写死，就和 perspective、rotateY 的数值强耦合，调一次就得全测一遍。
