transform-origin 默认值为50% 50%，即基于border box的中心点；需显式声明避免错位，语法仅支持“长度值”“关键字”“百分比”三类合法组合，且顺序、空格、单位须严格；SVG元素不响应CSS transform-origin，需用原生transform属性或包裹处理。
transform-origin 的默认值是什么
不设 transform-origin 时，浏览器按 50% 50% 处理——也就是元素盒模型的中心点。但注意：这个“中心”是基于 border box 计算的，不是 content box；如果元素有 border 或 padding，又没设 box-sizing，实际视觉中心可能和预期错位。
常见错误现象：rotate(10deg) 看起来“歪了”，其实是原点没对齐设计稿里的旋转支点。
实操建议：
- 始终显式声明
transform-origin，哪怕只是写transform-origin: 50% 50% - 用像素值更可控，比如
transform-origin: 0 0（左上角）、transform-origin: 100% 0（右上角） - 百分比值基于元素自身宽高，不是父容器；
20px 30px这类绝对值则从左上角 border box 起算
XY 坐标怎么写才不会被忽略
写法必须严格匹配语法，否则整个声明会被浏览器丢弃。最常踩的坑是空格、单位、顺序不对。
立即学习“前端免费学习笔记（深入）”；
正确写法只有三种合法组合：
-
transform-origin: 20px 30px（X Y，两个长度值） -
transform-origin: left top（X Y，两个关键字，支持left/center/right和top/center/bottom） -
transform-origin: 20% 30%（X Y，两个百分比）
错误示例：transform-origin: 20px, 30px（逗号会直接让规则失效）、transform-origin: x:20px y:30px（CSS 不认这种写法）、transform-origin: 30px 20px（X Y 顺序反了，结果就是水平偏移变垂直偏移）
transform-origin 在 SVG 里为什么不管用
SVG 元素（如 <circle></circle>、<rect></rect>）默认不走 CSS transform 流程，transform-origin 对它们无效。真正起作用的是 SVG 自身的 transform 属性 + center 类参数，或者用 viewBox 配合 transform。
使用场景：想让一个 <g></g> 组合内的图标绕某点旋转，不能只靠 CSS。
实操建议：
- 对纯 SVG 元素，改用
transform="rotate(45 10 10)"（第三个参数是中心点 X Y） - 如果非要套 CSS，把 SVG 包进
<div> 再加 <code>transform-origin，但要注意overflow: hidden可能裁掉旋转溢出部分 - 用
will-change: transform提前提示渲染引擎，避免 SVG + CSS transform 出现闪动或失真 - 避免在高频事件里修改
transform-origin，优先用固定像素值代替百分比 - 动画期间只动
transform，不动transform-origin；需要换支点就提前切图或用多个元素分别控制 - 检查是否意外触发了
layout thrashing：比如读取offsetWidth后立刻改transform-origin
移动端设置 transform-origin 后 rotate 动画卡顿
这不是 transform-origin 本身的问题，而是它触发了复合层（compositing layer）的创建时机不对。尤其当原点频繁变化（比如在 scroll 或 touchmove 中动态改），容易引发重排或强制同步布局。
性能影响明显：iOS Safari 下，transform-origin 设为百分比 + 元素宽高动态变化时，每帧都要重新计算原点位置。
实操建议：
复杂点在于：原点坐标看似简单，但它和元素盒模型、渲染管线、硬件加速层三者耦合很深。一个像素的偏差，可能让 GPU 把本该复用的纹理重新生成一遍。
