transform-origin 默认为 border box 中心（50% 50%），合法值为关键字、百分比、长度单位组成的 x y 对，需同元素上设置 transform 才生效，且始终锚定自身 border box。
不设 transform-origin 时，元素永远绕自身 border box 的中心（50% 50%）旋转；想绕左上角、底部、某像素点转，必须显式声明，且值只影响后续 transform，不触发重排。
transform-origin 的合法取值有哪些
它只接受三类组合：关键字、百分比、长度单位，且必须成对出现（x y），顺序不可颠倒。浏览器会按规则解析混合写法：
-
top left→ 等价于0 0，参考系是 border box 左上角 -
bottom 20px→ y 方向从 bottom 往上量 20px，不是从 top 往下 -
right 1em→ x 从右边界往左算 1em，y 默认居中（center） -
100px 50%→ x 固定 100px，y 是自身高度的 50%
⚠️ 错误写法如 transform-origin: left 50%（关键字+百分比混用）在部分旧版 Safari 中可能失效；稳妥起见，统一用 0 50% 或 left center。
为什么设置了 transform-origin 却没生效
常见原因不是语法错，而是作用时机或继承干扰：
立即学习“前端免费学习笔记（深入）”；
- 该属性必须写在触发
transform（如rotate()）的同一元素上，父元素设了无效 - 如果元素有
transform-style: preserve-3d或处于 3D 上下文，transform-origin可能被层叠覆盖 - 某些 CSS 框架（如 Bootstrap）全局重置了
transform-origin，需用!important覆盖（仅调试时） - 动画中用
@keyframes时，transform-origin必须在关键帧内声明，不能只写在初始状态
配合 rotate 做扇形展开或门式动画的典型写法
这类交互依赖精确的轴心定位，容易因 padding/border 导致视觉偏移：
- 绕左上角旋转（如菜单图标变叉）：
transform-origin: 0 0;，避免用top left（受 box-sizing 影响） - 绕底边中点“开门”：
transform-origin: bottom center;，注意此时center指垂直方向居中，非元素中心 - 绕右下角旋转（如弹出气泡）：
transform-origin: 100% 100%;，比right bottom更可控
⚠️ 如果元素有非零 padding 或 border，50% 50% 仍指 border box 中心，但内容视觉中心已偏移——这时应手动计算或用 box-sizing: border-box 统一基准。
真正难的不是写对值，而是理解它始终锚定在元素自身的 border box 上，和父容器位置、margin、甚至 display 类型都无关。一旦默认中心不符合预期，就别猜，直接用像素或百分比明确定义。
