旋转偏移因默认以左上角为原点，需设transform-origin: center；rotate()角度必须带单位如360deg；避免box-shadow、overflow:hidden等触发重排降级；动画优先级高于transition，推荐用animation而非混用。
旋转时元素位置偏移，是因为没设 transform-origin
默认情况下 transform: rotate() 以元素左上角为旋转中心，看起来像“飞出去”了。要让元素绕自身中心转，必须显式设置原点：
-
transform-origin: center;（等价于50% 50%） - 如果元素有
margin或position: absolute，先确认其盒模型边界是否被意外拉伸 - 避免在旋转元素上同时用
top/left动画，否则坐标系叠加会导致定位错乱
@keyframes 中 rotate() 的数值必须带单位
写成 rotate(90) 会失效，CSS 要求角度必须明确单位：
- 度数用
deg：例如rotate(360deg) - 弧度用
rad，但日常几乎不用 - 圈数用
turn：例如rotate(1turn)等价于360deg - 动画中从
0deg到720deg是转两圈，不是“转到 720 度这个角度”
旋转动画卡顿？检查是否触发了重排
单纯用 transform: rotate() 是 GPU 加速的，但以下情况会让浏览器降级到 CPU 渲染：
- 元素有
box-shadow或filter（尤其模糊值较大时） - 父容器设置了
overflow: hidden且旋转后超出裁剪区，强制重绘 - 动画期间频繁读取
offsetTop或getBoundingClientRect() - 解决方案：加
will-change: transform;提前提示，或用transform: rotateZ(0)强制启用合成层
rotate 动画和 transition 混用容易出错
如果既写了 transition: transform 0.3s，又用 @keyframes 控制 transform，两者会冲突：
立即学习“前端免费学习笔记（深入）”；
- CSS 动画优先级高于 transition，但中间状态可能被截断
- 想手动触发动画（比如 hover 启动），直接用
animation更可靠 - 若需交互控制，推荐用 JS 切换 class 触发
animation-play-state，而不是依赖 transition
div {
width: 100px;
height: 100px;
background: #3498db;
transform-origin: center;
animation: spin 2s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
注意：transform-origin 必须和 transform 在同一元素上生效，不要指望父元素设置它来影响子元素的旋转中心。 
