transform:rotate失效主因是渲染上下文问题：元素需有渲染盒子（非display:none等），内联元素需设display:block/inline-block，SVG需手动设transform-origin或transform-box；单位统一用deg，绕中心转须显式设transform-origin:center，性能优化需启用硬件加速。
transform:rotate 为什么转不动？常见失效原因
元素没动，大概率不是 rotate() 写错了，而是它依赖的渲染上下文出了问题。
-
transform不会触发重排（reflow），但需要元素有“渲染盒子”——display: none、visibility: hidden或父级overflow: hidden且子元素超出裁剪时，动画可能不可见 - 如果元素是内联元素（如
<span>），默认没有宽高，rotate()会生效但视觉上几乎看不出变化；加display: inline-block或block才能稳稳转 - 用在 SVG 元素上时，注意坐标系：SVG 的
transform默认以左上角为原点，要绕中心转得手动算偏移，或改用transform-box: fill-box+transform-origin: center
CSS 动画中 rotate() 的单位和取值细节
rotate() 看似简单，但单位混用、角度溢出、插值逻辑这些地方一不留神就让动画“卡半圈”。
- 支持多种单位：
rotate(90deg)、rotate(1.57rad)、rotate(.25turn)—— 混写不会报错，但不同单位在关键帧间插值时行为一致，推荐统一用deg避免心智负担 - 写
rotate(360deg)和rotate(0deg)在动画中效果相同，但浏览器可能跳过过渡；想保证顺滑一圈，建议从0deg到360deg，别用720deg之类——除非你真需要多圈动画 - 负角度合法：
rotate(-45deg)是逆时针，和rotate(315deg)渲染结果一样，但动画路径不同（前者短弧，后者绕远路），影响观感
如何让 rotate 动画绕中心而非左上角旋转？
默认以元素左上角为旋转中心，这不是 bug，是规范定义。要绕中心，必须显式改 transform-origin。
- 最简方案：
transform-origin: center—— 等价于50% 50%，适用于大多数块级元素 - 如果元素有
padding或border，且你希望绕内容区中心转，用transform-origin: content-box center（部分浏览器支持有限，稳妥起见还是用百分比） - 绝对定位元素配合
top/left时，transform-origin仍按自身盒模型计算，不是相对于父容器；别指望它自动对齐父级 center - 动画中动态改
transform-origin会触发 layout，慎用；如需切换支点，优先考虑嵌套一层<div>并对内层做rotate
rotate 动画性能差？可能是 transform 层没提上去
单纯 rotate() 是合成属性（composited），本该高性能，但一旦触发重排或重绘，就掉帧。
立即学习“前端免费学习笔记（深入）”；
- 确保元素启用了硬件加速：加
will-change: transform或transform: translateZ(0)（后者更兼容） - 避免在
rotate同时频繁改width、height、left等触发布局的属性——哪怕只改一次，也可能打断合成层 - 动画运行中用 DevTools 的 Rendering 面板勾选 “Paint flashing”，如果旋转时大面积绿色闪动，说明在重绘；此时检查是否用了
background: linear-gradient()或box-shadow等代价高的样式 - SVG 中大量
<g>套嵌 rotate，比单个<g>+transform更耗资源；能扁平化就扁平化
