transform-origin 默认值是50% 50%，即基于border box的中心点；需显式声明避免因padding、border导致视觉中心偏移，语法仅支持长度值、关键字、百分比三类合法组合。
transform-origin 的默认值是什么
不设置 transform-origin 时，浏览器默认用元素盒模型的中心点，也就是 50% 50%（水平居中、垂直居中），对应 center center。这意味着 rotate(45deg) 总是绕自身正中心转——如果你想要绕左上角、底部、某个像素点旋转，就必须显式改它。
怎么写 transform-origin 值才有效
它的值可以是关键字、百分比或长度单位，但必须成对出现（x y），顺序不能颠倒。常见写法：
-
transform-origin: top left→ 左上角（等价于0 0） -
transform-origin: bottom 20px→ 底部向上偏移 20px 处（y 方向是相对于 bottom 计算） -
transform-origin: 100px 50%→ 距左 100px、垂直居中 -
transform-origin: right 1em→ 靠右对齐，再向上偏移 1em（注意：right 是从右边界往左算）
⚠️ 容易踩的坑：transform-origin 的参考系是元素自身的 border box，不是父容器；而且它只影响后续的 transform（比如 rotate、scale），不会改变布局流或触发重排。
配合 rotate 使用时的典型场景
比如做一个下拉菜单的翻转动画，或让图标绕左上角扇形展开：
立即学习“前端免费学习笔记（深入）”；
button {
transform: rotate(45deg);
transform-origin: top left;
}
这时按钮会以左上角为轴心逆时针转 45 度。如果改成 transform-origin: bottom center，就变成“像门一样绕底边中点打开”。
另一个关键点：如果元素设置了 transform-style: preserve-3d 或在 3D 变换中使用 rotateX/rotateY，transform-origin 还支持第三个值（z 轴偏移），例如 50% 50% 20px，但绝大多数 2D 场景只需前两个。
浏览器兼容性和重绘影响
所有现代浏览器都支持 transform-origin（包括 IE10+），但旧版 Safari（
性能方面：transform-origin 本身不触发布局（layout），但一旦和 rotate 等一起用，尤其是动画中频繁修改，可能引发合成层变化。如果发现旋转边缘模糊，大概率是没开启硬件加速——加一句 transform: translateZ(0) 或 will-change: transform 通常能缓解。
真正容易被忽略的是：当元素有 border-radius 或 overflow: hidden 时，旋转后裁剪区域仍按原始矩形计算，视觉上可能看到“圆角被切掉”——这不是 transform-origin 的问题，而是坐标系变换后裁剪框没跟着动，得靠 wrapper 元素隔离处理。
