默认是50% 50%，即元素盒模型的水平和垂直中点；它基于border-box计算，不随父容器变化，但宽高为0时退化为0 0，且必须与transform同元素设置才生效。
默认就是绕元素自身中心转，不是左上角——但“自身中心”得你真能看见、真能控制，否则一旋转就飘。
transform-origin 默认值到底是啥
默认是 50% 50%，也就是元素盒模型的水平和垂直中点。它不看父容器，不看视口，只认自己宽高。但要注意：50% 50% 在某些情况下会“失效”：
- 元素宽高为 0（比如空
<div>或仅含 inline 文本未触发 BFC），此时50% 50%退化为0 0，实际绕左上角转 - 元素有 border/padding 且
box-sizing是content-box（默认），50% 50%指的是 content 区域中心，视觉上可能偏移 - SVG 元素不支持
center关键字，必须写50% 50%或具体像素
推荐统一用 transform-origin: center —— 它语义清晰，浏览器按 content box 中心计算，无视 border/padding，兼容性也足够好（IE11+、所有现代浏览器）。
绝对定位元素旋转中心错位的典型原因
写了 top: 50%; left: 50% 却没配 transform: translate(-50%, -50%)，这是最常踩的坑。
立即学习“前端免费学习笔记（深入）”；
此时元素左上角被拉到目标位置（比如视口中心），但 transform-origin: center 把锚点定在了元素自身中心——结果就是“锚点在中心，框悬在半空”，一旋转立刻偏移。
正确做法必须两步配合：
-
top: 50%; left: 50%→ 把元素左上角定位到目标点 -
transform: translate(-50%, -50%) rotate(45deg)→ 先回拉自身中心对齐目标点，再旋转 - 这两条必须写在同一
transform声明里，不能拆成两个 CSS 规则，否则动画过程可能闪动
hover 或动画中动态改旋转中心为啥不平滑
CSS 动画引擎不支持 transform-origin 的过渡插值，直接写 .icon:hover { transform-origin: bottom right; } 只会瞬间跳变，不会渐变。
如果真需要动态切换中心点（比如图标 hover 时从中心切到底部旋转），必须用 @keyframes 显式定义：
@keyframes spinFromBottom {
from { transform-origin: bottom center; }
to { transform-origin: center center; }
}
.icon {
animation: spinFromBottom 0.3s ease;
}
但绝大多数场景没必要这么干——固定用 center 更稳，也更易维护。
调试旋转“飘走”的关键线索
旋转后位置异常，别急着调 transform-origin，先检查：
- 元素是否已有其他
transform（比如translate或scale），它们会叠加影响最终视觉位置 - 是否把
transform-origin和transform拆在不同选择器里（如一个 class 设 origin，另一个设 rotate），层叠顺序可能导致 origin 被覆盖 - 用 DevTools 的 computed 面板确认生效的
transform-origin值，注意它是否被继承或重置 - 如果元素是 flex/grid 子项，确认其尺寸是否由内容撑开——
center依然有效，但得确保它真有可计算的宽高
真正难的不是写对那行代码，而是让“自身中心”这个概念，在布局、定位、盒模型、渲染阶段始终一致——差一点，转出来就歪一点。
