绝对定位元素用transform: rotate()不绕中心转是因为默认旋转原点为左上角（0 0），需显式设置transform-origin: 50% 50%并配合translate(-50%, -50%)才能实现居中旋转。
绝对定位元素用 transform: rotate() 为啥不绕中心转？
因为 transform: rotate() 默认绕元素自身的左上角（即 transform-origin: 0 0）旋转，而绝对定位本身不改变这一行为。即使你用 top: 50%; left: 50% 把元素拉到了视口中心，它照样从左上角开始转，看起来像“飘走”或“画圈”。
关键不是定位方式，而是旋转原点没调对。
-
transform-origin必须显式设为50% 50%（或center），才能让旋转锚点落在元素正中心 - 如果元素宽高不固定（比如内容动态），用
50% 50%比用具体像素值更安全 - 注意：
transform-origin的百分比是相对于元素自身尺寸，不是父容器
为什么加了 transform-origin: center 还偏移？
常见于同时用了 top: 50%; left: 50% 却没配 transform: translate(-50%, -50%)。此时元素左上角在视口中心，但旋转中心被设到了元素中心——结果就是“中心在转”，但整个元素悬在半空、视觉错位。
真正居中旋转需要两步：先靠定位把左上角挪到目标点，再用 translate 把自身中心对齐过去。
- 正确组合：
top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg) - 顺序不能反：
rotate()写在translate()后面，否则旋转会影响平移方向 - 如果只想要旋转、不关心位置，就别写
top/left，直接用margin: auto+position: absolute+inset: 0配合transform-origin
IE 或旧版 Safari 下 transform-origin: center 不生效？
老浏览器对 center 关键字支持不一致，尤其 IE10–11 只认 50% 50%，Safari 8–9 对多值语法敏感。
- 统一写成
transform-origin: 50% 50%，兼容性最好 - 避免写成
transform-origin: center center或transform-origin: center - 如果必须支持 IE9，还要加
-ms-transform-origin: 50% 50%（但 IE9 不支持transform的多数值，慎用旋转）
动画中旋转中心突然跳动？
多发生在用 JS 动态切换 transform 值时，比如从 rotate(0) 突然切到 rotate(90deg) translate(-50%, -50%)，中间缺失 translate 导致锚点“重置”。
- 所有涉及旋转的动画状态，
transform值必须保持结构一致：始终包含translate(-50%, -50%)和rotate(Xdeg) - 不要用
style.transform = 'rotate(45deg)'覆盖整个值，除非你确定之前没有其他变换 - 更稳妥的做法是用 CSS 类控制，比如
.rotating { transform: translate(-50%, -50%) rotate(45deg); }，JS 只负责增删类
50% 或顺序错了，就全乱套。实际写的时候，先把 transform-origin 和 translate 固定写死，再动 rotate 值，出问题的概率小很多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
