transform-origin 是旋转的物理支点，决定 rotate() 的旋转中心；默认 50% 50% 是元素盒模型几何中心，受 box-sizing、border、padding 影响，非视觉或父容器中心。
transform-origin 不是“辅助参数”，它是旋转发生的物理支点
它直接决定 rotate() 绕哪个点转——改错一个像素，整个动画就偏了。默认值 50% 50% 是元素自身盒模型的几何中心，不是视觉中心，也不是父容器中心。很多“旋转飘走”的问题，根源就是误以为它默认绕左上角，或没意识到 padding/border/box-sizing 会让 50% 50% 落在内容区之外。
常见错误现象：
- 一个带
20pxborder 的100px × 100px元素，transform-origin: 50% 50%仍落在100×100框的中心（50px, 50px），但内容区实际只有60×60，结果 rotate 后像往右上角“漂” - 绝对定位元素用了
top: 50%; left: 50%却没配transform: translate(-50%, -50%)，导致元素左上角被拉到视口中心，但旋转锚点还在自身中心——一转就明显甩出去
响应式场景下别用固定像素值设原点
写成 transform-origin: 300px 50px 看似精准，但容器宽度一变，原点就错位。百分比才是安全选择，因为 transform-origin 的百分比永远相对于**元素自身宽高**计算，和 background-position 类似，和 left/top 的百分比含义完全不同。
推荐组合：
-
transform-origin: top left→ 等价于0% 0%，适合左上角展开类动画 -
transform-origin: center bottom→ 等价于50% 100%，适合底部弹出按钮 -
transform-origin: 100% 50%→ 右中点，翻页动画必须用这个配rotateY()
动画里改 transform-origin 别指望 transition 平滑过渡
transform-origin 本身不支持 CSS 过渡，浏览器会跳变，而不是插值。写成这样无效：
button { transition: transform-origin 0.2s, transform 0.3s; }
button:hover { transform-origin: top left; transform: rotate(90deg); }
结果是 origin 瞬间切换，但 rotate() 还按旧原点执行，造成错位。
可行方案：
- 初始样式就写好目标
transform-origin，只靠transform过渡（最稳） - 用
@keyframes显式定义 origin 变化：@keyframes spinFromTop { from { transform-origin: top center; } to { transform-origin: center center; } } - JS 动态改时，必须触发重排：改完
el.style.transformOrigin后立刻读el.offsetHeight，或包进requestAnimationFrame
父子元素的 transform-origin 互不影响
父元素设了 transform-origin 对子元素完全无效；子元素要旋转，必须自己设，且 transform-origin 和 transform 必须写在同一个元素上。漏掉任意一个，旋转都按默认中心执行。
特别注意：
- SVG 内部的
<g></g>或<path></path>也能单独设transform-origin，但需先加transform: rotate(0)触发布局盒子 - 3D 旋转（如
rotateY）必须配合父容器的perspective，否则内容会被裁掉 - 用 DevTools 悬停
rotate()查看生效的transform-origin值，比凭感觉调更可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
