低版本 webkit（如 safari ≤13.1）不支持 transform-origin 的百分比值和 center 关键词，会静默丢弃该声明，回退为默认 0 0；应改用 left top 等兼容关键词、像素值或配合 translate() 模拟居中。
低版本 WebKit（如 Safari ≤13.1、旧版 iOS WebView、部分 Android Browser）中 transform-origin 的百分比值会被直接丢弃，回退为 0 0 或忽略整个声明，导致旋转/缩放“绕左上角狂转”——这不是 bug，是解析器不支持该语法的明确行为。
为什么 transform-origin: center 在 Safari ≤13.1 里失效
这些浏览器的 CSS 解析器不识别 center 关键词，也不支持混合单位（如 50% 50%），遇到就静默跳过。你写的 transform-origin: center 或 transform-origin: 50% 50% 实际等价于没写，浏览器按默认 0 0 处理。
- 验证方式：在 Safari 开发者工具中展开
transform-origin，若右侧显示not set或灰显，说明已被丢弃 - 注意：
transform-origin: 0 0和transform-origin: left top是少数被完整支持的写法 -
transform-origin: 100px 100px可用，但前提是父容器有明确尺寸，否则100px可能超出边界
必须用像素值或关键词组合替代百分比
放弃 50% 50%，改用 WebKit 兼容性确定的写法：
- 统一设为
transform-origin: 0 0（左上角），再配合transform: translate()手动对齐。例如居中缩放：transform: translate(-50%, -50%) scale(1.2) - 用关键词组合：
transform-origin: left top、transform-origin: right bottom、transform-origin: top center—— 这些在 Safari 12+ 全部有效 - 若需精确锚点（如图标绕按钮中心旋转），先用 JS 算出绝对像素：
const rect = el.getBoundingClientRect(); const ox = rect.left + rect.width / 2; const oy = rect.top + rect.height / 2;，再设style.transformOrigin = `${ox}px ${oy}px`
避免 transform-box 和动态修改 origin 的陷阱
transform-box 在所有低版本 WebKit 中均不被支持，写上去等于白费；而通过 JS 动态改 style.transformOrigin 后，Safari ≤13.1 不会立即重绘，必须强制触发 layout：
- 改完 origin 后立刻读取
el.offsetHeight或getComputedStyle(el).transform - 不要在
scroll或touchmove中高频设置 origin，容易卡顿；改用requestAnimationFrame节流 - 如果动画依赖多个 origin 切换（如钟摆效果），优先用
<g></g>包裹 +translate移动支点，而非反复改 CSS
真正麻烦的不是写法本身，而是低版本 WebKit 对“未定义行为”的静默处理——它不报错、不警告、不继承默认值，只默默按 0 0 执行。上线前务必在真机 Safari 12–13.1 上用 outline 和 getBoundingClientRect() 实测渲染位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
