必须启用 transform-style: preserve-3d 才能实现真正3D翻转，否则 rotateX/Y 仅表现为2D旋转；需配合 perspective、backface-visibility: hidden、cubic-bezier 过渡及 -webkit 前缀兼容 Safari。
keyframes 里必须启用 preserve-3d 才能真正翻转
很多人写完 @keyframes flip 发现卡片只是平面旋转、没有立体感，根本原因是没在父容器上设 transform-style: preserve-3d。CSS 3D 变换默认是“扁平化渲染”的，不显式开启，rotateX 或 rotateY 就只是二维动画。
实操要点：
- 卡片容器（比如
.card）必须设transform-style: preserve-3d - 翻转动画的
transform必须包含rotateY(180deg)或rotateX(180deg)，不能只用rotate(180deg) - 为避免透视失真，父级最好加
perspective: 1000px（值越小翻转越夸张）
前后两面要用 backface-visibility 隐藏反面
翻转到一半时，背面会透出正面内容，或者两面重叠显示——这是没控制 backface-visibility 的典型表现。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 正面元素（
.card-front）加backface-visibility: hidden - 背面元素（
.card-back）同样加backface-visibility: hidden - 别漏掉：这两面必须是同一级子元素，且都位于启用了
preserve-3d的容器内
animation-duration 和 timing-function 影响翻转真实感
生硬的匀速翻转（linear）看起来像机械臂，而真实翻转有加速/减速过程。直接用 ease-in-out 也不够——它在中间段还是偏快。
更自然的方案：
- 用
cubic-bezier(0.34, 1.56, 0.66, 1)模拟物理惯性（起始慢 → 中间快 → 结尾缓停） -
animation-duration建议 ≥ 0.6s；低于 0.4s 人眼难分辨翻转方向 - 如果卡片内容多或有阴影，适当延长 duration，否则视觉上会“闪”
移动端 Safari 对 3D transform 支持有隐藏限制
iOS 15+ 上部分机型（尤其是旧 iPad）会忽略 transform-style: preserve-3d，导致翻转变平面旋转，且控制台不报错。
绕过方法：
- 给翻转容器强制加上
-webkit-transform-style: preserve-3d - 确保触发翻转的元素有
will-change: transform（哪怕只是临时加） - 避免在
position: fixed容器里嵌套 3D 卡片——Safari 对 fixed + 3D 的组合兼容性更差
最麻烦的是：这个 bug 不一定复现，但一旦出现，用户看到的就是“卡片平转半圈就卡住”，得靠真机反复验证。
