rotate() 需配合 transition 或 @keyframes 才能实现动画，单独 transform: rotate(45deg) 仅为静态效果；须注意单位（deg）、方向（正顺负逆）、原点（transform-origin）、性能（仅用 transform 过渡）及上下文影响。
rotate() 动画必须配合 transition 或 @keyframes 才能动
只写 transform: rotate(45deg) 是静态的，不会产生动画效果。浏览器看到这个样式后直接渲染成旋转后的状态，没有“过程”。
常见错误现象：transform: rotate(90deg) 写在 hover 上，但鼠标移入时元素瞬间跳转，毫无过渡感。
- 要让旋转平滑，得加
transition: transform 0.3s ease（注意必须是transform，不能简写成all，否则可能意外触发重排） - 如果需要循环、多阶段旋转（比如加载图标），就得用
@keyframes+animation，例如定义@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } - IE10+ 支持
transform，但 IE 需要-ms-transform前缀；现代项目基本可忽略，但若兼容老系统，别漏掉
rotate() 的角度单位和方向容易搞反
rotate() 默认单位是 deg（度），不是 rad 或 turn；正数是顺时针，负数是逆时针——这点和 CSS 坐标系无关，纯属函数约定。
使用场景：做按钮点击反馈时想“向右翻转”，结果写了 rotate(90) 发现是顺时针“向下倒”，其实想要的是 rotate(-90deg)（逆时针向右翻）。
立即学习“前端免费学习笔记（深入）”；
- 单位必须显式写出：
rotate(90)无效，rotate(90deg)才生效（Safari 旧版甚至对省略单位更敏感） - 想用弧度或圈数？可以：
rotate(0.5turn)等价于rotate(180deg)，rotate(1.57rad)≈ 90°，但兼容性略差，日常推荐统一用deg - 组合变换时顺序重要：
transform: rotate(30deg) scale(1.2)和scale(1.2) rotate(30deg)效果不同——旋转始终绕元素中心，但缩放会改变“中心点实际位置”，所以先缩放再旋转，视觉上更稳
动画卡顿？检查是否触发了 layout 或 paint
单纯 transform 和 opacity 是浏览器优化过的合成属性，走 GPU 加速；但一旦混入 width、height、top、left 等会触发重排（reflow）的属性，动画立刻变卡。
常见错误现象：给一个 div 同时加 transition: all 0.3s 和 transform: rotate()，结果滚动时动画掉帧。
- 永远用
transition: transform 0.3s，而不是all - 确保旋转元素没设置
position: absolute+top/left动画，那会强制浏览器每帧计算布局 - 极端情况可加
will-change: transform提前提示，但别滥用——它本身有内存开销，仅在明确频繁动画的元素上加
rotate() 在 flex 或 grid 容器里表现异常？其实是 transform 原点问题
transform-origin 默认是 50% 50%（中心点），但若父容器是 display: flex 且子项未设宽高，或用了 align-items: flex-start，视觉上旋转轴心会“偏移”，让人误以为 rotate 失效。
使用场景：菜单图标（如三横线）旋转成叉号，结果转完发现图标往上飘了一截。
- 显式重置原点：
transform-origin: center或transform-origin: 50% 50%，避免受父级对齐方式干扰 - flex 项默认
align-self: stretch，若子元素没设高度，50%可能算不准——此时改用像素值更稳，比如transform-origin: 12px 12px（假设图标尺寸 24×24） - SVG 中的
<g></g>或<path></path>用transform旋转时，原点是 SVG 坐标系原点（左上角），不是元素中心，务必搭配transform-origin或用transform="rotate(45 12 12)"语法
真正麻烦的不是 rotate 本身，而是它和布局上下文、渲染管线、坐标系统的耦合——动之前先确认原点在哪、动画由谁驱动、有没有意外触发重排。
