transform-origin 默认值50% 50% 并非总指向视觉中心，因计算依赖元素宽高及盒模型；需显式设为center center、配合display: block和box-sizing: border-box，并避免与translate混用。
transform-origin 默认不是中心点
很多元素旋转时“歪着转”，根本原因是 transform-origin 默认值是 50% 50% —— 听起来像中心，但实际生效依赖于元素是否设置了宽高或是否处于文档流中。常见陷阱包括：
• 图片、内联元素（如 <span>）没设 display: block 或尺寸，50% 50% 会按内容盒（content box）计算，而内容盒可能偏移
• 使用了 border 或 padding 但没考虑盒模型影响
• 父容器有 text-align: center 或 flex 布局，让元素视觉居中，但 transform-origin 仍以自身左上角为参考系
如何真正让旋转绕几何中心
必须显式指定原点，并确保坐标系稳定：
-
transform-origin: center center是最安全写法（等价于50% 50%，但语义更清晰） - 对图片/图标等替换元素，加
display: block防止行内布局干扰 - 如果元素有
border，用box-sizing: border-box让50% 50%基于边框盒计算 - 避免在父级用
transform: translateX()等移动后再旋转，否则原点会随位移偏移
动画中 origin 偏移的典型错误
下面这段代码会让旋转看起来“晃动”：
.rotate {
animation: spin 2s infinite;
transform-origin: 50% 50%; /* 表面没问题 */
}
@keyframes spin {
from { transform: rotate(0deg) translateX(10px); }
to { transform: rotate(360deg) translateX(10px); }
}问题在于：transform 是复合操作，translateX() 改变了元素位置，导致 50% 50% 对应的物理坐标已不在原始中心。正确做法是分离变换：
立即学习“前端免费学习笔记（深入）”；
- 把位移放到父容器（如用
margin或position） - 或改用
transform: rotate()单独作用于子元素，不混入平移 - 若必须复合，用
transform-origin: 0 0+ 手动计算中心偏移（不推荐）
调试 origin 是否生效的小技巧
临时加一行辅助样式，直观验证原点位置：
.debug-origin {
outline: 1px dashed red;
transform-origin: center center;
/* 加上这行，红框交叉点就是旋转中心 */
position: relative;
}
.debug-origin::before {
content: "";
position: absolute;
width: 6px;
height: 6px;
background: red;
left: calc(50% - 3px);
top: calc(50% - 3px);
border-radius: 50%;
}注意：这个伪元素只在开发时用，上线前删掉。真正容易被忽略的是——transform-origin 的百分比值始终相对于元素自身的宽高，而不是父容器；哪怕元素被 scale(0.5) 缩小了，50% 50% 依然指它缩放后的中心。
