能稳定跑满60FPS的卡片翻转关键在于避免重排重绘、仅操作合成层：perspective须设于外层容器，Safari需外层加display:block和position:relative保底，正反面均需显式声明backface-visibility:hidden及初始transform，transition仅限transform属性，移动端用:focus-within或JS切换类，will-change仅限翻转层。
能稳定跑满 60 FPS 的卡片翻转，关键不是加多少动画参数，而是避开重排和重绘——只让浏览器动合成层。
perspective 必须设在外层容器上
很多人把 perspective 写在 .card 自身上，结果翻转卡顿、背面消失。这是因为 perspective 是为子元素建立 3D 视角用的，写在自己身上等于没建。
-
.card-wrapper { perspective: 1000px; }✅ 正确：子元素.card才能获得深度感 -
.card { perspective: 1000px; }❌ 错误：无效，且可能触发意外重绘 - Safari 对 flex 容器内
transform-style: preserve-3d支持弱，建议外层加display: block; position: relative;套壳保底
backface-visibility 和初始 transform 必须显式声明
不设 backface-visibility: hidden，翻转一半时正反面会同时显示；不预置 transform，首帧渲染错位，iOS Safari 直接白屏。
- 正面默认朝前：
.card-front { transform: rotateY(0deg); } - 背面默认朝后：
.card-back { transform: rotateY(180deg); } - 正反两面都加：
backface-visibility: hidden;，不能只加一面 - 禁用
overflow: hidden在翻转容器上——它会强制transform-style降级为flat
transition 只能监听 transform，绝不能用 all
transition: all 0.6s 看似省事，实则埋雷：只要 JS 动态改了 z-index 或 CSS 改了 opacity，整条动画管线就掉帧。
- ✅ 正确写法：
transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); - ❌ 禁止写法：
transition: all 0.6s;、transition: transform opacity 0.6s; - 移动端别依赖
:hover：加tabindex="0"，用:focus-within或 JS 切换.is-flipped类 - 需要硬件加速时，仅在翻转层加
will-change: transform;，切勿全局滥用
最易被忽略的是：翻转动画的“平滑”不取决于缓动函数多高级，而在于每一帧是否真的只走合成路径。哪怕写了 cubic-bezier(0.17, 0.67, 0.83, 0.67)，只要某次重排悄悄混进来了，60 FPS 就崩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
