元素旋转缩放卡顿主因是非合成层触发重排重绘，应仅用transform和opacity做过渡，统一写为transition: transform 0.3s, opacity 0.3s；禁用width、height等会降级渲染的属性，并可辅以will-change: transform或translateZ(0)强制GPU加速。
元素同时做旋转（rotate）和缩放（scale）时过渡卡顿、不流畅，通常不是因为用了多个 transform 值，而是触发了非合成层（non-composited layer）导致浏览器频繁重排重绘。关键在于让 transition 仅作用于可硬件加速的属性，并统一用 transform 复合变换，避免混用其他影响布局的属性（如 width、top、left）。
确保只用 transform + opacity 做过渡
浏览器对 transform 和 opacity 的变化能走合成层（compositor layer），无需触发布局（layout）和绘制（paint），性能最优。一旦在 transition 中包含 height、margin、background-color 等，就会降级为软件渲染，造成掉帧。
- ✅ 正确写法：
transition: transform 0.3s ease, opacity 0.3s ease; - ❌ 错误写法：
transition: transform 0.3s, width 0.3s, background-color 0.3s;
统一用 transform 函数组合，别拆开写多个 transition
transform 是一个复合属性，rotate(30deg) scale(1.2) 和 scale(1.2) rotate(30deg) 效果不同（顺序影响结果），但它们都属于单个 transform 值。只要 transition 目标是 transform 这一个属性，浏览器就能高效插值计算中间矩阵，不会割裂处理。
- ✅ 推荐：
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); - ❌ 无效且有害：
transition: rotate 0.3s, scale 0.3s;（CSS 中没有独立的rotate或scale属性）
强制开启 GPU 加速（必要时）
某些低端设备或旧版浏览器可能未自动启用合成层。可对需要动画的元素添加 will-change: transform; 或轻量级 hack：transform: translateZ(0); 或 transform: translate3d(0, 0, 0);，主动提示浏览器为其创建独立图层。
立即学习“前端免费学习笔记（深入）”；
- 建议只加在真正需要动画的元素上，避免过度使用导致内存占用升高
-
will-change最好配合 JS 动态增删（如 hover 前设置，结束时移除），防止长期占用资源
检查是否被其他样式“拖累”
即使 transform 写得再规范，如果父容器有 overflow: hidden、filter、mask 或层级嵌套过深，也可能打断合成链路，导致子元素无法独立合成。可打开 Chrome DevTools → Rendering → ✅ “Paint flashing” 和 “Layer borders”，观察动画时是否有意外重绘区域或图层断裂。
- 临时移除父级
filter或overflow测试是否改善 - 用
transform-style: preserve-3d可帮助维持 3D 上下文，但仅在真正需要 3D 变换时使用
