必须用 transition: transform 0.3s 且 rotate() 带单位（如 deg），显式设 transform: rotate(0deg) 初始态、transform-origin 锚点，并慎用 will-change 和 js 动态设置 style.transform。
直接用 transition 配合 transform: rotate() 就能实现平滑旋转过渡，但必须确保 transition 目标属性是 transform，且单位（如 deg）不能省略，否则过渡无效。
为什么 transition: all 0.3s 有时不转
常见错误是把 transition 写成 all 或 rotate —— 浏览器根本不认识 rotate 这个 CSS 属性，而 all 在部分场景下会因重排/重绘触发策略失效。真正起作用的只能是 transform。
- ✅ 正确写法：
transition: transform 0.3s ease-in-out - ❌ 错误写法：
transition: rotate 0.3s（语法非法） - ❌ 危险写法：
transition: all 0.3s（可能跳过 transform 变化，尤其在 Safari 中） - 单位缺失也会让 rotate 失效：写
rotate(90)不生效，必须是rotate(90deg)
transform-origin 必须显式设置才稳定
默认 transform-origin: 50% 50% 看似合理，但在 flex / grid 容器、position: absolute 或缩放后元素上，视觉旋转中心容易偏移，导致“转歪了”。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 固定锚点更可靠：比如
transform-origin: center center或transform-origin: 0 0 - 如果元素有
border-radius或阴影，transform-origin偏移还会让阴影轨迹异常 - 不要依赖父容器样式推断 origin；每个需旋转的元素都应单独声明
hover 触发旋转时，别漏掉初始状态
只在 :hover 里写 transform: rotate(180deg)，但没给元素本身设初始 transform: rotate(0deg)，会导致首次悬停出现“突变”而非平滑过渡——因为浏览器从 none 到 rotate(180deg) 无法插值。
- 务必为元素设基础态：
transform: rotate(0deg) - 哪怕角度是 0，也得显式写出，否则 transition 无起点可插值
- 若同时用
scale或translate，记得合并写：例如transform: rotate(0deg) scale(1)，避免被后续声明覆盖
滚动或 JS 动态更新时，will-change 能防卡顿
当旋转由 scroll 事件或 requestAnimationFrame 频繁驱动时，浏览器可能反复重排重绘。加 will-change: transform 提前提示渲染引擎该元素将变化，可启用图层提升（layer promotion），显著减少掉帧。
- 仅对高频更新的元素加：
will-change: transform - 不用时建议移除（JS 控制），长期开启可能增加内存开销
- 搭配
transform: rotate()使用才有效；对left/top等布局属性无效 - 注意：Safari 对
will-change较敏感，若旋转抖动，先检查是否多层嵌套触发了意外图层分裂
最易被忽略的一点：所有动态设置 style.transform 的 JS 代码，都会完全覆盖之前通过 class 设置的其他 transform 值（比如已有 scale(1.2)，再执行 el.style.transform = 'rotate(45deg)' 就丢掉了缩放）。需要手动拼接或改用 cssText / CSS.supports + getComputedStyle 合并，否则视觉效果会突然“归零”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
