rotate() 默认绕元素中心（50% 50%）旋转，非左上角；需用 transform-origin 显式设置锚点，如 0 0；它不触发重排，属合成属性，正角度为顺时针，动画需显式声明初始 transform 值。
rotate() 的旋转中心默认是元素中心，不是左上角
很多初学者以为 transform: rotate(45deg) 会绕左上角转，结果元素“飞出视野”——其实是绕 transform-origin 指定的点转，默认值是 50% 50%（即水平、垂直居中）。如果你要绕左上角转，得显式改：transform-origin: 0 0；绕右下角就是 transform-origin: 100% 100%。
常见错误现象：rotate() 后元素位置“飘移”，实际是旋转中心和布局流不匹配导致的视觉错位，不是 transform 本身移动了元素。
- 用
transform-origin调整旋转锚点，单位支持px、%、left/center/right等关键词 - 该属性不影响文档流，但会影响旋转后与其他元素的相对位置关系
- 在 flex 或 grid 容器里，
transform-origin仍以自身盒模型为基准，不是父容器坐标系
rotate() 不触发重排，但可能影响渲染性能
transform: rotate() 属于合成属性（composited property），浏览器通常会把它交给 GPU 处理，不触发布局（reflow）和重绘（repaint），只走合成（composite）阶段。这点比用 top/left + transition 模拟旋转要高效得多。
但要注意：如果旋转元素里有大量文本、阴影或模糊滤镜，GPU 负载会上升；另外，低版本 Android WebView 对 rotateZ() 支持不稳定，建议统一用 rotate()（等价于 rotateZ()）。
- 避免对
position: static的大尺寸图片频繁 rotate 动画，可能触发层提升（layer promotion）并吃内存 - 如需兼容 IE9+，只能用
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)（已废弃，仅作了解） - 用
will-change: transform可提前提示浏览器优化，但别滥用——它本身有开销
rotate() 的角度单位和负值含义很直白，但容易忽略方向约定
CSS 中 rotate() 使用数学标准：正角度 = 顺时针，负角度 = 逆时针。这和 SVG 的 rotate() 一致，但和某些 Canvas API（如 ctx.rotate()）方向相同，别被“逆时针是正向”的数学直觉带偏。
单位只认 deg、rad、grad、turn，其中 1turn = 360deg，写 rotate(.25turn) 比 rotate(90deg) 更语义化。
-
rotate(0.5turn)和rotate(180deg)效果完全一样，选哪个看团队规范 - 不要写
rotate(90)（缺单位），浏览器会直接忽略整条声明 - 动画中用
rotate()插值时，浏览器自动按最短路径旋转，比如从350deg到10deg，不会转整整一圈
rotate() 和 transition / animation 搭配时，初始状态必须可计算
想让元素点击后旋转 90 度，写了 transition: transform 0.3s，但第一次点击没动画？大概率是因为初始状态没设 transform: rotate(0deg)。CSS transition 只在两个明确的、可解析的 transform 值之间插值，而 transform: none 和 rotate(90deg) 类型不匹配，浏览器无法过渡。
使用场景：按钮悬停旋转、折叠面板图标翻转、加载动画。
- 始终为触发 transition 的元素显式声明初始
transform，哪怕只是transform: rotate(0) - 避免混用
rotate()和scale()在同一个 transition 里却不写全量值，比如从rotate(0)到rotate(90deg) scale(1.2)，必须写成transform: rotate(90deg) scale(1.2)，否则 scale 会退回到 1 - 用
@keyframes写动画时，from和to都要写完整 transform 值，不能一个写rotate(0)，另一个只写rotate(180deg)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
