transform-origin 默认值是 50% 50%，即元素自身的水平和垂直中心点，而非父容器中心或左上角；百分比值始终相对于元素自身宽高计算，center 与 50% 50% 等价且语义更清晰。
transform-origin 默认值到底是啥
默认就是 50% 50%，也就是元素自身的水平和垂直中心点，不是父容器中心，也不是左上角。很多“旋转飘走”的问题，其实只是误以为它默认绕左上角转——但实际是绕自身中心，只是你没注意元素定位或尺寸导致视觉上像偏了。
- 在普通文档流、flex 或 grid 子项里，
50% 50%始终相对于元素自身盒模型计算 - 如果元素宽高由内容撑开（比如未设
width/height的div），center依然有效，不会 fallback 到父级 - 关键字
center和50% 50%等价，但前者更语义清晰，推荐优先用center
绝对定位元素旋转中心错位的典型原因
用了 top: 50%; left: 50% 却没配 transform: translate(-50%, -50%)，是居中旋转失败最常见原因。此时元素左上角被拉到视口中心，但 transform-origin: center 把旋转锚点定在了元素自身中心——结果就是“锚点在中心，但整个框悬在半空”，一旋转就明显偏移。
- 必须两步配合：
top: 50%; left: 50%定位左上角 →transform: translate(-50%, -50%)回拉自身中心对齐目标点 - 旋转要写在同一个
transform声明里，比如transform: translate(-50%, -50%) rotate(45deg)，避免分拆成多条规则引发闪动 - 不要只改
transform-origin就以为能“修复”定位偏移——它不移动元素位置，只改旋转支点
动态切换旋转中心时为什么 hover 不生效
直接靠 class 切换 transform-origin 值，在动画或 hover 中大概率失效或卡顿。CSS 动画引擎不支持 transform-origin 的过渡插值，浏览器会跳变，而不是平滑过渡。
- 要用
@keyframes显式定义 origin 变化，例如：@keyframes spinFromTop { from { transform-origin: top center; } to { transform-origin: center center; } } - 不能只写
.element:hover { transform-origin: bottom right; }并指望它渐变——它只会瞬间切过去 - 如果只是简单 hover 旋转（如图标翻转），建议固定用
center，避免引入不必要的 origin 动态逻辑
transform-origin 百分比是相对谁的
transform-origin 的百分比值（比如 20% 80%）永远相对于**元素自身的 width/height**，不是父容器，也不是视口。这点和 background-position 类似，但和 left/top 绝对定位的百分比含义完全不同。
-
transform-origin: 0 0= 左上角；100% 100%= 右下角；center center= 中心 - 若元素宽高不固定（如文字容器），用
center比用像素值（如20px 20px）更鲁棒 - 嵌套了
transform的祖先元素（比如带scale(0.8)的父容器）会影响子元素的最终渲染位置，但不改变transform-origin的计算基准——它始终基于子元素原始尺寸
真正麻烦的从来不是“怎么写”，而是“为什么写了没效果”。transform-origin 看似简单，但一旦混入定位、动画、响应式或嵌套变形，错位就藏在你看不见的坐标系统转换里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
