transform: rotate() 添加 transition 无效的主因是未触发重绘、优先级覆盖或误用 transition: all；应明确写 transition: transform 0.3s ease-in-out，并配合 translateZ(0) 或 will-change: transform 启用 GPU 加速确保合成层渲染。
给 transform: rotate() 添加 transition 无效？
直接在 transform 上写 transition: transform 0.3s 通常能生效，但常见失效原因是：元素没触发重绘（比如父容器有 will-change: transform 干扰）、或 CSS 优先级被覆盖、或用了简写 transition: all 0.3s 却被其他属性抖动拖慢。更稳妥的做法是明确限定过渡属性和时间函数。
- 始终用
transition: transform 0.3s ease-in-out，避免all - 确保旋转目标是可动画的 CSS 属性（
rotate()属于transform，支持硬件加速，没问题） - 如果旋转前后都是静态样式，记得加
display: block或清除浮动，防止 layout 触发重排干扰过渡
rotate() 动画卡顿或掉帧怎么办
卡顿往往不是过渡设置问题，而是浏览器没启用 GPU 加速，或频繁触发 layout。关键点在于让旋转只走合成层（compositor layer），不触发 paint 或 layout。
- 给旋转元素加
transform: translateZ(0)或will-change: transform（仅在必要时加，别滥用） - 避免同时修改
width、height、top等会触发 layout 的属性 - 不要在
:hover中用animation+@keyframes模拟旋转——它比纯transition更重，且难以控制中断行为
如何实现点击切换 90°/180°/270° 的平滑旋转
用 class 切换比内联 style 更可控，也方便配合 JS 状态管理。注意：多次快速点击容易导致过渡叠加，需防抖或锁定状态。
.icon {
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.icon.rotated-90 {
transform: rotate(90deg);
}
.icon.rotated-180 {
transform: rotate(180deg);
}
.icon.rotated-270 {
transform: rotate(270deg);
}
- 推荐用
cubic-bezier()替代ease，例如上面的值能让旋转开头更轻快、结尾更稳 - JS 切换 class 前，可先移除所有旋转 class，再添加目标 class，避免残留冲突
- 如果需要「点击一次转 90°，再点再转」，用
getComputedStyle(el).transform解析当前矩阵不如维护一个 state 变量可靠
移动端 rotate 过渡突然跳变？
iOS Safari 对 transform 过渡的初始状态判断有时不准，尤其元素刚插入 DOM 时。常见表现是：第一次旋转不过渡，直接跳到目标角度。
立即学习“前端免费学习笔记（深入）”；
- 确保元素在进入 DOM 后、首次触发旋转前，已计算好初始
transform（哪怕只是transform: rotate(0deg)） - 可在 JS 中强制触发一次重排：
el.offsetHeight，再设 class；或用setTimeout(() => el.classList.add('rotated'), 0) - 避免用
transform: rotate(var(--deg))配合 CSS 自定义属性做动态旋转——部分旧版 Safari 不支持该组合的过渡
