transform-origin 默认值是50% 50%，即元素自身宽高的几何中心；该值基于元素自身尺寸计算，不随动画变化，且仅在动画开始前读取一次。
transform-origin 的默认值到底是什么
不写 transform-origin 时，浏览器按元素盒模型的几何中心算——也就是 50% 50%，但这个“中心”是相对于元素自身的宽高，不是父容器，也不是视口。很多人误以为它会随 transform 动画一起变化，其实它只在动画开始前读取一次，之后固定不变。
常见错误现象：rotate(360deg) 看起来绕着左上角转，其实是你没设 transform-origin，而元素本身有 padding/margin/border，或用了 box-sizing: border-box 但宽高没撑满，导致“50% 50%”落在了视觉之外。
- 块级元素默认宽 100%，高由内容撑开，所以
50% 50%往往偏上 - 行内元素（如
<span></span>）没有宽高概念，transform-origin会退化为基于字体基线+em 单位计算，行为更难预测 - 如果元素设置了
width和height，且内容为空，50% 50%才真正落在正中心
怎么用像素或百分比精确定位旋转中心
参数顺序是 transform-origin: x y [z]，其中 z 只在 3D 变换中生效，2D 场景可忽略。关键在于：百分比是相对于元素自身尺寸，不是父容器；像素值是相对于元素左上角原点。
使用场景：做扇形菜单、卡片翻转、图标呼吸缩放，都需要把原点钉死在某个角落或自定义坐标。
立即学习“前端免费学习笔记（深入）”；
-
transform-origin: 0 0→ 左上角（常用于从左上展开的下拉动画） -
transform-origin: 100% 100%→ 右下角（适合右下角浮动按钮的弹出） -
transform-origin: 20px 30px→ 距左 20px、距上 30px（适合图标内部某锚点，比如齿轮齿根） -
transform-origin: center bottom→ 关键字组合也合法，等价于50% 100%
transform-origin 在 CSS 动画里为什么“不动”
因为 transform-origin 不是动画属性，它不会随 @keyframes 插值变化。你在 @keyframes 里改它，浏览器会直接跳变，不会过渡。
性能影响：频繁修改 transform-origin（比如通过 JS 每帧设置）会触发 layout，比改 transform 本身代价高得多。它不像 opacity 或 transform 那样能进合成层。
- 想实现“原点滑动+旋转”的复合效果，得拆成两步：先用
translate移动整个元素，再用固定transform-origin旋转 - 用
will-change: transform对transform-origin无效，别白加 - Flex 或 Grid 容器中的子项，
transform-origin仍以自身为基准，不受父容器对齐方式影响
兼容性与 SVG 中的差异
所有现代浏览器都支持 transform-origin，但 IE10–IE11 要加 -ms- 前缀，而且只支持两个参数（不支持 center top 这类关键字组合）。
SVG 元素（如 <circle></circle>、<g></g>）的行为不同：它的 transform-origin 默认不是 50% 50%，而是 0 0（即 SVG 坐标系原点），而且必须配合 transform 写在同一个属性里才可靠，单独写 CSS 可能被忽略。
- SVG 中更稳妥的做法是用
transform="rotate(45, 10, 20)"直接指定旋转中心坐标 - CSS 里给 SVG 元素设
transform-origin: 50% 50%，实际生效位置取决于viewBox和width/height是否一致 - 移动端 Safari 对小数百分比（如
49.9%）渲染偶尔有偏移，建议用整数或像素值
最易被忽略的一点：transform-origin 的生效前提是元素必须有明确的渲染盒（rendering box）。display: none 的元素、未插入 DOM 的节点、或者 width/height 为 0 且无内容的空元素，它的原点计算可能失效或回退到 0 0。
