transform-origin控制变换锚点而非元素位置，默认50% 50%，需按需设为0 0（左上）、100% 100%（右下）、50% 0（顶中）或left bottom等；混用top/left与transform或忽略父级scale对子元素坐标系的影响，会导致视觉偏移。
直接改 transform-origin 就行，但值写错或混用定位方式，旋转一动就“飘”——它不移动元素位置，只换支点，支点偏了，视觉上整个元素就飞了。
transform-origin 值怎么写才对
它控制的是旋转、缩放等变换的锚点，不是元素本身的位置。默认是 50% 50%（中心），但实际场景中常要手动指定：
-
transform-origin: 0 0→ 锚点在左上角（适合图标绕按钮左上角转） -
transform-origin: 100% 100%→ 锚点在右下角 -
transform-origin: 50% 0→ 锚点在顶部正中（适合下拉菜单从顶边展开） -
transform-origin: left bottom→ 关键词写法，等价于0 100% - 只写一个值如
transform-origin: left，Y 轴默认为center（即left 50%）
为什么 rotate 一动就偏移？常见定位陷阱
问题往往不出在 rotate()，而出在和 top/left 混用，或没配平 transform 链：
- 错误写法：
top: 50%; left: 50%; transform: rotate(45deg);→ 元素先被 top/left 摆到视口中心（按左上角），再绕自身中心旋转，结果视觉中心严重偏移 - 正确做法：全交给
transform处理，比如transform: translate(-50%, -50%) rotate(45deg);，且确保transform-origin: 50% 50% - 如果要用
top/left定位，就别在同个元素上叠加transform缩放/旋转，否则偏移量会叠加不可控
父容器有 transform 会影响子元素的 transform-origin 吗
不会。transform-origin 始终基于**子元素自身的 border box** 计算，跟父级有没有 transform、有没有 scale 都无关。
立即学习“前端免费学习笔记（深入）”；
但要注意：如果父容器用了 transform: scale(0.8)，子元素虽然视觉变小了，它的 transform-origin: 50% 50% 依然按它自己缩放前的宽高算 —— 这可能导致你预期的“居中旋转”看起来不对，因为子元素坐标系被父级影响了，但 origin 本身没变。
最易忽略的一点：动画中动态切换 transform-origin（比如 hover 时从 50% 50% 改成 bottom），必须确保该属性本身可动画（它支持 transition），否则切换生硬或失效；同时注意，origin 变化 + rotate 同时发生时，浏览器会按新 origin 重算整个变换，不是“平滑过渡支点”，这点常被当成 bug。
