transform-origin 默认中心在元素内容盒中心，但需元素有明确宽高且定位上下文稳定；否则中心失效，导致旋转偏移。
transform-origin 默认中心在哪
浏览器对 transform-origin 的默认值是 center center，也就是元素自身的盒模型中心点。但这个“中心”不是凭空算出来的——它依赖两个前提：元素必须有明确的宽高（或由内容撑开），且其定位上下文要稳定。如果元素是空的 <button> 或仅靠伪元素撑开，又没设 width/height，那它的盒尺寸就是 0×0，center 就失去意义。
- 块级元素（如
div）有内容或显式宽高时，transform-origin: center指的是内容盒（content-box）中心 - 行内元素（如
span）必须先设display: inline-block或block，否则transform-origin可能被忽略或按行框（line box）计算 - 绝对定位元素若未设
top/left，又没宽高，transform-origin: center实际参考的是 0×0 的点，旋转看起来就像“原地乱晃”
为什么用 translate(-50%, -50%) 居中后旋转还偏
这是最常踩的坑：居中和旋转用了两套坐标系。你用 top: 50%; left: 50%; transform: translate(-50%, -50%) 把元素视觉中心挪到父容器中心，但 transform-origin: center 仍以元素自身左上角为起点算 50% 宽高——如果元素宽高是动态的（比如只靠伪元素撑开），这个“center”就漂了。
- 根本原因：伪元素（
::before/::after）不参与父元素盒尺寸计算，父元素可能宽高为 0 - 典型症状：三线 hamburger 图标旋转成 X 时，上下横线甩出去，中间线不动——因为每根线的
transform-origin都在自己窄长盒的中心，而非按钮整体中心 - 解法不是硬调
transform-origin: 50% 50%，而是让旋转锚点落在一个有确定尺寸的容器上（比如带width/height的button）
真正可控的旋转中心怎么设
想让旋转严格绕父容器几何中心，就得把旋转动作“上收”到有明确尺寸的容器上，而不是分散到伪元素里。这意味着放弃用伪元素独立控制每根线的位置，改用背景或统一 transform 控制。
- 给按钮设固定尺寸，例如
width: 40px; height: 40px;，再设transform-origin: center - 中间横线用
background实现，上下线用::before/::after，但它们的top/bottom值统一基于按钮尺寸（如top: 12px、bottom: 12px），而不是用translateY()动态偏移 - 动画只作用于按钮本身：
.menu-open { transform: rotate(90deg); }，所有子元素随父容器一起转，自然绕同一中心 - 避免在同一个
transform里混写translate和rotate，尤其当translate值在动画中变化时——顺序不同会导致合成矩阵错位
JS 动态更新旋转角度时怎么保中心不飘
直接写 el.style.transform = "rotate(45deg)" 会抹掉之前的所有 transform（比如 scale 或 translate），导致元素突然跳动。这不是中心偏移，是坐标系重置。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：用 CSS 类切换，把旋转逻辑全交给 CSS 管理，JS 只负责增删类名
- 非要 JS 控制，就别拼字符串，而是读取当前 matrix：
getComputedStyle(el).transform，解析出当前旋转角，再叠加新角度，最后生成完整transform字符串 - 更轻量的做法：用
dataset存当前角度，每次更新后重建：el.style.transform = `rotate(${angle}deg) scale(${scale})`，确保所有变换都在一条线上 - 归零时别只设
rotate(0deg)，直接清空el.style.transform = ""，避免残留其他变换干扰
transform-origin 也只是修修补补。 
