transform-origin 偏心会导致 rotate 动画“绕错点转”而视觉摇晃，主因是支点未对齐元素视觉重心；常见于 box-sizing、padding、border 或图标字体占位偏差，且 Safari≤13.1 不支持 center 关键词。
transform-origin 偏心会让 rotate 动画“绕错点转”
旋转动画视觉上“摇晃”，不是因为 rotate() 写错了，而是支点（transform-origin）没对齐元素的视觉重心。浏览器严格按你写的原点做几何旋转——哪怕只偏移几个像素，放大后弧线轨迹就会明显甩出预期范围，形成不稳定、抖动、甚至“飞走”的效果。
常见偏心原因：padding/border/box-sizing 导致视觉中心 ≠ 几何中心
元素有 padding、border 或用了 box-sizing: border-box 时，transform-origin: 50% 50% 仍按盒模型边界计算，但人眼认定的“中心”可能被边框或内边距拉偏。图标字体（如 Font Awesome）更典型：渲染字形实际占位常小于容器，50% 50% 算出来的是空容器中心，不是图标本体中心。
- 用 DevTools 的
outline: 1px solid red叠加查看真实盒模型边界 - 临时把
transform-origin改成center center和0 0对比，看哪一版旋转时图标不“漂移” - 若用 CSS-in-JS，检查插值是否覆盖了
transform-origin声明
Safari ≤13.1 里 transform-origin: center 被静默丢弃
低版本 WebKit 不识别 center 关键词和百分比值，遇到就跳过，回退为默认 0 0（左上角）。你写的是居中旋转，实际是绕左上角狂甩——这就是所谓“突然摇晃”的真实原因。
- 验证方式：在 Safari 开发者工具 Styles 面板中看
transform-origin是否显示为not set - 兼容写法优先用
transform-origin: left top、top center等关键词组合 - 必须用像素定位时，先用
getBoundingClientRect()算出绝对坐标再设style.transformOrigin
动画中动态改 transform-origin 不触发重绘
JS 修改 element.style.transformOrigin 后，Safari ≤13.1 和部分旧 Android 浏览器不会自动重排，导致新原点“没生效”，动画继续绕旧点转，看起来像抽搐或偏移。
- 强制刷新渲染流水线：改完后立刻读取
el.offsetHeight或getComputedStyle(el).transform - 避免在
scroll或touchmove中高频修改，改用requestAnimationFrame节流 - 钟摆类多支点动画，优先用
translate()移动支点，而非反复改 CSS
真正麻烦的不是 origin 值本身，而是它和 rotate() 组合时，任何一点偏差都会被角度放大；而浏览器对它的处理又高度依赖解析器版本和渲染时机——调试时得同时盯住 DevTools 的 computed 值、真实 outline 边界、以及目标设备的实际行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
