transform-origin 的默认值是 50% 50%，即元素盒模型的几何中心；若元素存在 padding、border、裁剪或定位偏移，视觉中心与几何中心不一致，会导致旋转“歪了”。
transform-origin 的默认值到底是什么
很多情况下元素旋转“歪了”，不是因为 rotate() 写错了，而是没意识到 transform-origin 默认是 50% 50%（即中心点）。如果元素本身有 padding、border、或者被父容器裁剪过，视觉中心和几何中心可能不一致，导致旋转看起来“偏移”。
常见误判场景：
• 图标字体（如 Font Awesome）的 font-size 和实际渲染框不匹配
• 使用 box-sizing: border-box 但 border 宽度参与了布局计算
• 元素设置了 margin 或 position: absolute 偏移后，仍按原始坐标系算 origin
如何快速验证 transform-origin 是否生效
别靠猜，用 DevTools 直接看。在 Chrome/Firefox 的 Styles 面板中，展开元素的 transform 属性，鼠标悬停在 rotate() 上方，会显示当前生效的 transform-origin 值；右键该属性可“Force state” → “:hover” 触发动画再观察。
更稳妥的调试方式：
• 临时加一条 outline: 1px solid red; 看元素真实边界
• 在动画关键帧里显式写上 transform-origin: center; 或 transform-origin: 0 0; 对比效果
• 如果用 CSS-in-JS（如 styled-components），确保插值没把 transform-origin 覆盖掉
rotate 动画中 transform-origin 的单位陷阱
transform-origin 支持像素、百分比、关键词，但混合使用容易出错。比如 transform-origin: 50% 20px; 是合法的，但若父容器高度为 0（如未设置 height 或内容为空），50% 就会退化为 0px，导致原点意外偏移到左上角。
安全做法：
• 优先用纯关键词： transform-origin: top left;、transform-origin: bottom center;
• 若需精确像素定位，确认父容器有明确宽高，或改用 transform: rotate() translate() 组合替代调整 origin
• 在 flex/grid 容器中，transform-origin 仍基于元素自身盒模型，不受父级对齐方式（如 justify-content）影响
动画重绘时 transform-origin 没更新怎么办
当通过 JS 动态修改 transform-origin（比如点击切换旋转支点），发现动画没响应，大概率是因为浏览器把 origin 当作“静态属性”缓存了——它不会自动触发重排（reflow），除非你强制刷新渲染流水线。
解决办法：
• 修改 origin 后，立即读取一个触发 layout 的属性，例如 element.offsetHeight;
• 或者把 origin 改动和 transform 更新放在同一帧，用 requestAnimationFrame 包裹
• 使用 @keyframes 时，origin 必须写在关键帧内（如 to { transform: rotate(360deg); transform-origin: right top; }），不能只在选择器里声明
立即学习“前端免费学习笔记（深入）”；
动画里旋转不准，问题八成不在rotate() 本身，而在 origin 的坐标系理解偏差或动态更新时机没卡准。尤其要注意父容器尺寸为空、JS 批量修改样式、以及 DevTools 中看到的 origin 值是否真被应用到了当前帧。 
