transform: rotate() 单独使用仅为静态旋转，必须配合 @keyframes 和 animation 属性才能实现动画；单位（deg、rad、turn、grad）不可省略，否则声明无效；旋转中心默认为元素中心，需用 transform-origin 修改；仅组合 transform 与 opacity 可保证 GPU 加速，避免性能问题。
transform: rotate() 动画必须配合 @keyframes 才能动
单独写 transform: rotate(90deg) 只是静态旋转，不会产生动画效果。CSS 动画需要明确的时间轴定义，也就是 @keyframes 规则 + animation 属性组合使用。
常见错误现象：div { transform: rotate(360deg); animation: spin 2s; } —— 这样写根本不会转，因为没定义 @keyframes spin。
- 必须先用
@keyframes定义旋转起点和终点，比如from { transform: rotate(0deg); } to { transform: rotate(360deg); } -
animation要作用在元素上，不能只写transform - 别漏掉
animation-duration，否则默认是 0s，等于没动
rotate() 单位写错或缺单位直接失效
rotate() 接受的单位只有 deg、rad、turn、grad，不写单位（如 rotate(180)）在所有浏览器里都会被忽略，样式表里这条声明直接无效。
使用场景：做加载图标、按钮点击反馈、卡片翻转等，单位一错就“静止”。
立即学习“前端免费学习笔记（深入）”；
-
rotate(180deg)✅ 正确 -
rotate(180)❌ 失效（无单位） -
rotate(0.5turn)✅ 等价于 180deg，适合做半圈动画 - 注意
rad是弧度制，Math.PI对应 180deg，别混用
动画卡顿或闪烁？检查是否触发了重排（reflow）
用 transform: rotate() 本身是 GPU 加速的，但一旦和 width、height、top、left 等布局属性一起动画，浏览器会强制走 CPU 渲染路径，导致掉帧甚至闪烁。
性能影响明显：尤其在低端 Android 或 Safari 上，rotate() 搭配 margin 动画，帧率可能从 60fps 掉到 20fps。
- 只用
transform（含rotate、scale、translate）+opacity是安全组合 - 避免在动画中修改
display、z-index、盒模型属性 - 必要时加
will-change: transform;提前告知浏览器，但别滥用
rotate() 的旋转中心默认是元素中心，要改得用 transform-origin
很多需求不是绕中心转——比如钟表指针绕顶端转、下拉箭头绕底边翻转。不设 transform-origin，rotate() 永远以 50% 50% 为原点。
参数差异直接影响视觉逻辑：transform-origin: top left 和 transform-origin: center bottom 行为完全不同。
-
transform-origin: 0 0→ 左上角为圆心（像素值也支持） -
transform-origin: center bottom→ 底边中点，适合翻转类交互 - 注意：该属性本身不触发重绘，但会影响
rotate()的空间表现，调试时建议先加outline: 1px solid red看实际旋转锚点
真正麻烦的是多层嵌套旋转时 transform-origin 的继承关系和坐标系叠加，这时候光靠猜不行，得用 DevTools 的 3D 视图功能实时看旋转轴。
