如何通过设置transform-origin为center实现CSS元素中心点旋转？

本文共计931个文字，预计阅读时间需要4分钟。

很多人以为`transform-origin`默认就是元素中心，实际默认值是`50% 50% 0`——看似等价，但一旦元素有`border`、`padding`或`box-sizing: border-box`影响，视觉旋转中心就可能偏移。更关键的是：

• 显式写 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。