transform-origin 是 rotate() 的固定旋转支点，基于元素 border box 计算，不随定位变化，设错会导致动画中心偏移；50% 50% 不等于视觉中心，受 border/padding/box-sizing 影响；动态修改需强制重排或同帧更新；它仅作用于自身，不支持绕视口坐标旋转，也不改变 getBoundingClientRect 结果。
transform-origin 就是旋转的圆心，不是“影响”，它直接定义圆心
它不参与动画插值，也不随元素位置变化而偏移——它就是 rotate() 执行时那个不动的支点。浏览器画旋转轨迹时，所有角度都绕这个点算，改错一个像素，整个动画视觉中心就偏了。
常见错误现象：
- 元素明明写了
top: 50%; left: 50%，一加rotate()就往右上角“飞” - 缩放后 tooltip 整体下移，hover 区域和视觉内容错开
- 翻页动画像纸片被风吹起，而不是从书脊稳稳掀开
根本原因：你设的 transform-origin 和你眼睛期待的“旋转圆心”不一致。它永远基于元素自身的 border box 计算，和定位方式（top/left、translate）无关。
为什么 50% 50% 不等于视觉中心
默认值 50% 50% 是盒模型中心，但盒模型 ≠ 视觉呈现。当元素有 border、padding、box-sizing: border-box 或被 overflow: hidden 裁剪时，浏览器仍按完整 border box 算中点，而你看到的内容区可能已经偏了。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用 DevTools 的 Styles 面板悬停
rotate()，直接看生效的transform-origin值 - 临时加
outline: 1px solid red，确认元素真实边界 - 对比
transform-origin: center和transform-origin: top left效果，别靠“感觉”调 - 对 SVG 图标或文字，
center指的是它自身坐标系中心，不是父容器或菜单组的几何中心
动态改 transform-origin 时动画不生效？因为浏览器缓存了原点
JS 直接写 el.style.transformOrigin = 'top left' 后立刻执行 el.style.transform = 'rotate(45deg)'，动画大概率还是按旧原点跑——浏览器把 transform-origin 当静态属性缓存，不会自动触发重排。
必须强制刷新 layout 或同帧更新：
- 改完 origin 立刻读一个 layout 触发属性，比如
el.offsetHeight - 或包进同一帧：
requestAnimationFrame(() => { el.style.transformOrigin = 'top left'; el.style.transform = 'rotate(45deg)'; }) - 更稳妥：用 class 切换代替内联 style，比如
el.classList.add('rotate-from-top')
注意：transform-origin 只对当前元素生效，父元素设了不影响子元素；它和 transform 必须写在同一个元素上，缺一不可。
圆周运动不是靠 rotate() 实现的
transform: rotate() 只让元素绕自己 transform-origin 自转，不是绕外部某点公转。想实现小球绕按钮转圈，本质是位置变化，得靠 translateX() + translateY() 配合三角函数算坐标，或用 @keyframes 预设路径关键帧。
容易踩的坑：
- 误以为
transform-origin: 50px 50px能让元素绕页面坐标 (50, 50) 旋转——它只认自身盒模型，不认视口 - 在响应式布局中用固定像素值（如
transform-origin: 20px 30px），容器一缩放，原点就错位 - 给每个菜单项单独设不同
transform-origin，不如统一由父容器控制中心点，更稳定也更易维护
最易被忽略的一点：transform-origin 不改变 DOM 几何边界，getBoundingClientRect() 返回的仍是未旋转前的 left/top ——如果要算旋转后的视觉中心，不能直接读，得手动补偿或加伪标记。
