要让 rotatey 动画稳定 60 fps，必须只触发动画的合成阶段：设 perspective 在外层容器、翻转层启用 transform-style: preserve-3d、正反面均设 backface-visibility: hidden 并预置 transform，禁用 transition: all 和动态改 opacity/z-index/filter，移动端用 focus-within 或 js 控制，补 -webkit-transform 和 translatez(0)，避免 overflow: hidden 破坏 3d 层级，perspective 宜设 600–1200px。
直接用 transform: rotateY(180deg) + transition 能跑满 60 FPS，但前提是避开重排（reflow）和重绘（repaint）陷阱——核心是只触发动画属性的合成（composite）阶段，不碰 layout 或 paint。
为什么 hover 翻转一卡一顿？
常见现象：鼠标移入后延迟半秒才动、翻到一半卡住、Safari 里背面突然消失。根本不是动画写慢了，而是浏览器在每一帧都偷偷做了三件事：计算布局（因为用了 left/top）、重绘背景（因为改了 background-color）、压平 3D 层级（因为父容器没设 transform-style: preserve-3d）。
必须确保以下三点同时成立：
-
perspective设在卡片外层容器（如.card-container），不能设在翻转元素自身上 - 翻转触发层（如
.card-inner）必须有transform-style: preserve-3d，且不能被 flex/grid 父容器“吃掉”该声明（Safari 尤其敏感，可加一层display: block; position: relative套壳） - 正反面均需
backface-visibility: hidden，且初始状态就用transform: rotateY(0deg)和rotateY(180deg)预置好，避免首帧渲染错位
怎样让 rotateY 动画稳定 60 FPS？
CSS 动画能否稳在 60 FPS，取决于是否只修改“可合成属性”。rotateY() 本身合格，但搭配不当就会降级。
- 过渡必须明确写成
transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1)，绝不能用transition: all——后者会监听所有属性变化，哪怕只是z-index微调也会强制重排 - 禁止在翻转过程中动态改
opacity、z-index或filter，这些会破坏 3D 层叠顺序，尤其在 iOS Safari 中导致背面不可见 - 移动端必须关闭
:hover依赖：给.card加tabindex="0"，用:focus-within降级支持；或用 JSclassList.toggle('is-flipped')，避免ontouchstart连点错乱 - 为强制硬件加速，可在翻转层加
will-change: transform（仅在需要时启用，勿滥用）
移动端点击翻转为何背面空白或镜像显示？
这不是 bug，是 3D 渲染管线未正确建立的表现。iOS Safari 对 preserve-3d 在某些 flex 容器内支持不稳定，且默认 backface-visibility 是 visible。
- 正反两面都要显式声明
backface-visibility: hidden，漏一个就会在 90° 附近看到文字“透过来”甚至反向镜像 - 避免在
.card上直接设display: flex；若必须用，外层再包一层div并设transform-style: preserve-3d - 微信内置浏览器（尤其 Android 旧版）可能忽略
rotateY，需补-webkit-transform: rotateY(180deg)，并确保该元素有translateZ(0)触发 GPU 渲染 - 不要设
overflow: hidden在任何 3D 父容器上——W3C 明确规定它会强制transform-style退化为flat
最易被忽略的一点：perspective 值不是越大越好。设成 5000px 看似“安全”，实际会让旋转弧度趋近直线，失去纵深感；600px–1200px 是多数屏幕下兼顾畸变控制与立体感的黄金区间。调试时用 devtools 的 3D 视图面板实时拖拽观察空间关系，比猜参数快十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
