transform-origin 默认值在所有现代浏览器中均为 50% 50% 0；不一致表现源于盒模型差异、父容器裁剪或旧版移动浏览器对像素值解析不稳定，而非默认值不同。
transform-origin 的默认值在所有现代浏览器中完全一致
所有支持 transform-origin 的浏览器（Chrome 8+、Firefox 4+、Safari 3.1+、Edge 12+、Opera 10+）都严格遵循 CSS Transforms Level 1 规范：默认值是 50% 50% 0，即元素盒模型的水平/垂直中心 + Z 轴 0。不存在“Chrome 默认 center、Firefox 默认 top left”这类误解。
真正导致表现不一致的，从来不是默认值差异，而是以下三点：
- 盒模型计算方式不同（尤其
box-sizing: border-box与content-box混用时） - 父容器设置了
overflow: hidden或clip-path，裁剪了旋转后溢出部分，视觉上像“原点偏了” - 旧版 Android Browser（≤4.3）或 iOS Safari ≤8 对
transform-origin: 30px 20px这类像素值解析不稳定，但百分比（50% 50%）始终可靠
百分比 vs 像素值：兼容性断层在这里
用 transform-origin: 50% 50% 是安全的；但写成 transform-origin: 100px 50px 就可能在低版本移动浏览器中失效或错位。
原因很简单：百分比始终相对于**元素自身宽高**计算（和 background-position 一样），而像素值依赖于当时 layout 的精确尺寸——如果 JS 动态改宽高后没触发重排，旧像素值就卡住了。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 响应式场景下，一律用百分比或关键字（
top、center、bottom等） - 必须用像素定位？先确保元素已 layout 完毕（例如
el.offsetWidth读取一次），再设transformOrigin - 避免混合单位，比如
transform-origin: 20px 50%—— Safari 9–11 曾对此解析异常
3D 旋转（rotateX/rotateY）必须配 perspective，否则 transform-origin 失效
很多人发现 transform: rotateY(45deg) 没绕右边缘转，调了 transform-origin: 100% 50% 也没用。根本原因不是 origin 不生效，而是缺少 perspective。
perspective 必须加在**父容器**上，且不能是 0 或 none；子元素的 transform-origin 才会在 3D 空间中真正起支点作用。
常见错误写法：
div { transform: rotateY(45deg); transform-origin: 100% 50%; } /* ❌ 没 perspective，退化为 2D 旋转 */正确写法：
.container { perspective: 1000px; }
.container > div { transform: rotateY(45deg); transform-origin: 100% 50%; } /* ✅ */JS 动态修改 transform-origin 后动画不生效？不是 bug，是渲染机制
直接写 el.style.transformOrigin = 'top left'; el.style.transform = 'rotate(45deg)';，动画大概率仍按旧原点执行。因为浏览器把 transform-origin 当作静态布局属性缓存，不触发重排。
解决方法只有两个靠谱路径：
- 强制读取一个 layout 属性，如
el.offsetHeight，让浏览器同步更新计算值 - 用 class 切换代替内联 style：
el.classList.add('rotate-from-top')，CSS 中定义.rotate-from-top { transform-origin: top left; }
最易被忽略的一点：transform-origin 和 transform 必须写在同一个元素上，且不能被 will-change 或 contain 错误隔离——否则 origin 可能被忽略而不报错。
