旧版移动端（ios safari ≤13.1、android webview ≤4.4）不支持 transform-origin 的 center、百分比及混合单位，会静默丢弃并回退为 0 0；纯关键词（left top）、绝对像素值（0 0、100px 100px）兼容；避免动态修改、慎用 transform-box；js 动态计算需四舍五入像素值并节流。
旧版移动端（尤其是 iOS Safari ≤13.1、Android WebView ≤4.4）中 transform-origin 的“计算错误”不是真算错，而是解析器压根不支持某些值——比如 center、50% 50%、混合单位（50% 20px）会被静默丢弃，回退为默认 0 0。直接改写法就能解决，不用 polyfill。
为什么 transform-origin: center 在 iOS 13.1 及更早里完全没用
这些浏览器的 CSS 解析器不识别 center 关键词，也不支持百分比与像素混用。你写的 transform-origin: center 或 transform-origin: 50% 50% 实际等价于没写，浏览器按规范 fallback 到 0 0（左上角）。DevTools 里会显示 “not set” 或灰显，就是证据。
-
transform-origin: left top、transform-origin: right center这类纯关键词组合全部兼容（Safari 12+ 起支持） -
transform-origin: 0 0和transform-origin: 100px 100px也安全，但后者需确保父容器有明确尺寸，否则100px可能超出边界 - 别碰
transform-box：所有旧版移动端都不支持它在任何元素上生效，写了等于白费
缩放/旋转时元素“飘走”，其实是 origin 没对齐定位方式
常见错误是同时用 top/left 定位和 transform: scale()，而没同步调整 transform-origin。例如：top: 50%; left: 50%; transform: scale(1.2) —— 浏览器先摆左上角到中心，再以元素中心为支点放大，结果视觉中心严重偏移。
- 统一交给
transform链式处理：transform: translate(-50%, -50%) scale(1.2)，并配transform-origin: 0 0 - 若必须用
top/left，则把transform-origin改成0 0，让缩放锚定左上角不动 - 避免在动画中动态改
transform-origin：旧版 Safari 不会立即重绘，得强制触发 layout，比如读取el.offsetHeight，但这会卡顿，不如提前写死
需要鼠标跟随或精确锚点？JS 算像素，别信百分比
纯 CSS 搞不定“以鼠标为原点缩放”，因为旧版移动端不支持 transform-origin 接收动态值。必须用 JS 把相对坐标转成绝对像素，并确保是整数——亚像素（如 100.5px）在 Safari 旧版里极易引发文字模糊或渲染抖动。
- 用
getBoundingClientRect()算出元素真实位置：const rect = el.getBoundingClientRect(); const ox = rect.left + rect.width / 2; const oy = rect.top + rect.height / 2; - 设
el.style.transformOrigin = Math.round(ox) + 'px ' + Math.round(oy) + 'px'（务必四舍五入） - 别在
touchmove或scroll里高频设置，改用requestAnimationFrame节流 - 如果只是图标绕按钮中心旋转，优先包裹
<g></g>+ SVG 原生transform="rotate(45 100 100)"，比 CSS 更稳
真正麻烦的不是语法本身，而是旧版 WebKit 对非法值的静默丢弃——它不报错、不警告、不继承默认行为，只默默切到 0 0。验证是否生效，最简单的方法是在 Safari 开发者工具里展开 transform-origin 属性，看它是不是灰显或标着 “not set”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
