transform-origin 是独立 css 属性，须与 transform 并列声明，作用于整个变换链；双值语法为 x 后 y，支持关键字/百分比/像素混用；非默认原点用像素值会增加 gpu 计算负担。
transform-origin 必须和 transform 并列写，不能塞进函数里
很多人写成 transform: rotate(45deg) transform-origin: right top;，这完全无效——transform-origin 是独立 CSS 属性，不是 rotate() 的参数。它作用于整个 transform 链（比如 rotate(30deg) scale(0.8) 共用同一个原点），所以必须单独声明：
div {
transform: rotate(45deg) scale(1.2);
transform-origin: right bottom;
}
只写 transform: translate(100px, 0) 时，transform-origin 完全不生效，因为平移不依赖锚点。
双值语法最常用：先 X 后 Y，关键字/百分比/像素可混用但有顺序限制
合法写法：transform-origin: left top、transform-origin: 20px 30%、transform-origin: right 10px。注意：
-
left/center/right只能用于 X 轴，top/center/bottom只能用于 Y 轴；top left是错的，顺序必须是 X 然后 Y -
left等价于0%，center等价于50%，但top不能写成0%（语义不同，浏览器解析行为一致，但可读性差） - 百分比是相对于元素自身宽高计算的，不是父容器；负值允许，如
-10px -10px表示原点移出左上角外侧
老版 Safari/Chrome 还得加 -webkit- 前缀
现代 Chrome/Firefox/Edge 已支持无前缀 transform-origin，但以下场景仍需显式加前缀：
- iOS Safari ≤ 15.6（2023 年及更早版本）会直接忽略无前缀写法
- macOS Safari 13–14（2020–2021 年）必须加
-webkit-transform-origin - 部分旧版 Android WebView 同样不认无前缀
正确写法是并列声明：
div {
transform-origin: right bottom;
-webkit-transform-origin: right bottom;
}
别用 JS 属性名 WebkitTransformOrigin 替代 CSS 规则——那只是 DOM 接口，仅限动态设置时用。
性能敏感场景下慎用非默认原点 + 像素值
transform-origin 默认值 50% 50% 由 GPU 高效处理；一旦改成 20px 30px 这类绝对单位，GPU 需额外做「平移→变换→反平移」三步矩阵运算，计算量翻倍。Mars 性能文档明确指出：非百分比原点会显著增加合成阶段负担。
优化建议：
- 优先用
10% 15%代替20px 30px（假设元素宽高固定） - 需要动态改锚点时，用嵌套元素模拟：外层
rotate()，内层translate(-50%, -50%)，避免直接改transform-origin - 加
will-change: transform提前告知浏览器，但别滥用——它本身有内存开销
真正容易被忽略的是：这个属性不触发重排，改了可能完全看不出变化，除非你同时用了 rotate、scale 或 skew。调试时记得检查是否漏掉了配套的 transform 函数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
