transform-origin 是变换的物理支点，决定 rotate()、scale()、skew() 等函数绕哪一点执行；它按 border-box 计算，默认 50% 50% 为盒模型几何中心，不随内容或父容器变化，且仅作用于自身 transform，需与 transform 同元素设置。
transform-origin 是变换的物理支点，不是视觉辅助线
它直接决定 rotate()、scale()、skew() 等函数绕哪个点执行——改一个像素，整个动画就偏了。浏览器不是“画个圆再转”，而是以该点为轴心重算每个顶点坐标。这个点本身不占空间、不触发重排，但所有变换矩阵都基于它构建。
默认 50% 50% 是盒模型几何中心，不是内容或父容器中心
这个值按 border-box 尺寸计算：包括 border 和 padding，受 box-sizing 影响。比如一个 width: 200px; padding: 20px; border: 5px solid 的元素，它的几何中心在距左/上各 125px 处（(200 + 40 + 10)/2），而非你肉眼看到的内容区中心。很多“旋转飘走”问题，根源就是误以为它默认对齐内容或父容器。
transform-origin 必须和 transform 写在同一元素上
父元素设 transform-origin 对子元素无效；它只作用于自身触发的 transform。常见错误包括：
- 在父容器写
transform-origin: top left，指望子元素scale(1.2)从左上角展开 —— 不生效 - 用 JS 动态设置
element.style.transformOrigin = '50% 50%'，但没同时写element.style.transform = 'scale(1.2)'—— 浏览器仍用默认原点 - 缩放时未重置
transform，导致多次触发后scale和transform-origin叠加出意外位移
动态鼠标跟随缩放必须用 JS 计算百分比，且格式不能错
纯 CSS 无法读取鼠标位置，transform-origin 不支持 event.clientX 这类运行时值。JS 动态设置时要注意：
立即学习“前端免费学习笔记（深入）”；
- 用
evt.offsetX / element.offsetWidth * 100算 X 百分比，同理算 Y -
element.style.transformOrigin必须是字符串，如'62.5% 33.3%'，中间带空格；写成'62.5%,33.3%'或漏空格会解析失败 - 缩放前建议先设
element.style.transform = 'scale(1)'，避免旧transform值干扰新 origin 的插值动画 - 响应式场景慎用像素值（如
'20px 30px'），宽度变化后原点就错位
实际中最容易被忽略的是：它不改变布局流，也不影响其他元素定位，但一旦和 transition 或 will-change 搭配不当，就会在缩放瞬间出现模糊或跳帧——这不是 bug，是浏览器在插值两个不同原点坐标时的自然表现。
