transform-origin 默认值是 50% 50% 0，非视觉中心；显式写 center 更安全，它基于 content box 中心且无视 border/padding，推荐优先使用。
transform-origin 默认值不是 center
很多人以为 transform-origin 默认就是元素中心，实际默认值是 50% 50% 0 —— 看似等价，但一旦元素有 border、padding 或被 box-sizing: border-box 影响，视觉旋转中心就可能偏移。更关键的是：如果元素本身宽高为 0（比如空 div 或仅含 inline 内容未触发 BFC），50% 50% 会退化为 0 0，导致绕左上角旋转。
- 显式写
transform-origin: center最安全，浏览器会按 content box 的中心计算（无视 border/padding） -
center是50% 50%的语义别名，但更健壮，推荐优先使用 - 若需精确到 border box 中心（极少见），用
transform-origin: 50% 50%并确保box-sizing: border-box已生效
旋转前必须先设置 transform-origin
transform-origin 必须在 transform: rotate() 之前声明，否则部分浏览器（尤其是旧版 Safari）可能忽略 origin 设置。CSS 层叠顺序在这里起作用：同一条规则内声明顺序无关，但跨选择器或媒体查询时，后声明的 transform 可能覆盖前面的 transform-origin。
- 把两者写在同一 CSS 规则里，例如：
.spinner { transform-origin: center; transform: rotate(45deg); } - 避免拆成两条规则：
.spinner { transform-origin: center; }和.spinner.rotating { transform: rotate(45deg); }—— 这样在 class 切换瞬间可能闪动 - 动画中若 origin 需动态变化（如 hover 时切旋转点），必须用
@keyframes显式定义 origin 动画，不能只靠 class 切换
center 在不同上下文中的含义差异
transform-origin: center 的行为依赖于元素的 formatting context。对 flex / grid 子项，它仍基于该子项自身的盒模型；但若父容器是 display: flex 且子项未设宽高，子项尺寸由内容撑开，此时 center 仍有效 —— 不会去“对齐父容器中心”。
- 绝对定位元素（
position: absolute）同样适用center，它始终相对于自身盒模型，与top/left无关 - SVG 元素不支持
center关键字，必须用数值，如transform-origin: 50% 50%或具体像素 - 用
transform: rotate()+transform-origin: center无法让元素“绕父容器中心转”，那需要额外 translate 补偿，不是 origin 能解决的
调试旋转中心偏移的常见线索
如果旋转看起来“歪了”，先检查是否被其他 transform 覆盖（比如已有 translate 未重置）、或元素存在隐藏的 margin/padding 影响盒尺寸。Chrome DevTools 的 “Computed” 面板里展开 transform-origin 会显示最终解析值（如 12.5px 12.5px），比看 Styles 面板更可靠。
- 临时加
outline: 1px solid red查看元素真实边界，确认 center 是否落在预期位置 - 用
transform: rotate(90deg)搭配transition: transform 0.3s，手动 hover 观察起始/结束帧，比静止截图更容易发现偏移 - 遇到伪元素（
::before/::after）旋转异常？它们默认无尺寸，必须显式设content: ""+ 宽高，否则center无效
实际项目里，transform-origin: center 这一行代码看似简单，但它和元素盒模型、渲染上下文、甚至 transition 触发时机都咬合得非常紧。漏掉一个 content: "" 或多写一个 margin，都可能让旋转中心悄悄跑偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
