transform-origin是独立CSS属性，必须与transform平行声明而非嵌套其中；它仅影响rotate、scale、skew及3D变换，对translate无效；取值顺序为X轴在前、Y轴在后，支持关键字、百分比和像素，且默认为50% 50%。
transform-origin 不是 transform 的子属性，必须单独声明
很多人写成 transform: rotate(45deg) transform-origin: top left，这完全无效——transform-origin 是独立 CSS 属性，不能塞进 transform 值里。它和 transform 必须写在同一个元素上，但彼此平行。
常见错误现象：rotate 看起来没反应、旋转轴“漂移”、动画卡在旧位置
- 检查 DevTools 的 Styles 面板，确认
transform-origin是否真的生效（不是被覆盖或继承失效） - 确保没有父级设置了
transform-style: preserve-3d却漏了perspective，否则 3D 旋转会因裁剪而“消失” -
transform-origin对translate无影响，只作用于rotate、scale、skew和 3D 变换
方位词、百分比、像素值的取值差异直接影响视觉对齐
写 transform-origin: left top 和 transform-origin: 0 0 表面等效，但行为不同：前者按盒模型边缘计算（含 border/padding），后者是绝对偏移，且不响应容器缩放。
使用场景举例：翻页动效、菜单展开、图标点击反馈
立即学习“前端免费学习笔记（深入）”；
-
left top/right center等方位组合更语义化，适合固定锚点（如按钮左上角弹出提示） -
25% 75%更适合响应式布局，但要注意：当元素宽高不一致或含box-sizing: border-box时，“25%”未必落在你预期的视觉位置 - 避免直接用
10px 20px——容器尺寸一变，原点就错位；若必须用像素值，优先配合calc()，比如calc(100% - 20px) 50%
JS 动态修改 transform-origin 后 rotate 不生效？缺了 layout 触发
浏览器把 transform-origin 当作静态布局属性缓存。直接执行 el.style.transformOrigin = 'bottom right'，再设 el.style.transform = 'rotate(90deg)'，旋转仍按旧原点执行。
原因：两次赋值被合并进一次样式计算，未强制重排
- 简单补救：赋值后立刻读一个 layout 触发属性，例如
el.offsetHeight或getComputedStyle(el).transformOrigin - 更稳妥：用
requestAnimationFrame包裹两行更新，确保同帧生效 - 生产环境推荐 class 切换：
el.classList.replace('rotate-from-center', 'rotate-from-bottom')，CSS 中定义对应 origin 和 transform
transform-origin 只对当前元素生效，父子之间不继承也不穿透
给父容器设 transform-origin: 100% 50%，不会让子元素的 rotateY 绕父右边缘转——子元素的旋转中心永远只由它自己的 transform-origin 决定。
容易踩的坑：
- 做 3D 翻页时，左右页需分别设置
transform-origin: 0 50%和transform-origin: 100% 50%，不能只调父容器 - 子元素有
transform但没配transform-origin，就会回退到默认50% 50%，和父级无关 - 用
will-change: transform优化性能时，transform-origin改变也应纳入 will-change 范围，否则可能触发意外重绘
最易被忽略的一点：当你用 outline: 1px solid red 检查元素边界时，看到的是包含 border 和 padding 的盒模型边界；而 transform-origin: 50% 50% 正是按这个边界算的——不是内容区，不是视觉焦点，就是那个矩形框的几何中心。
