transform-origin 决定 transition 中旋转/缩放的中心点，默认为50% 50%；它不支持过渡动画，需预先设定；受祖先 transform 等属性影响时，百分比值将相对包含块而非自身。
transform-origin 影响 transition 动画的旋转/缩放中心点
CSS transition 本身不控制动画“从哪开始转”或“从哪开始缩”，它只平滑地插值两个状态之间的属性变化。真正决定旋转（rotate()）、缩放（scale()）或倾斜（skew()）动作视觉起点的，是 transform-origin。如果没显式设置，它默认是 50% 50%（即元素中心），这时所有变换都绕中心发生——看起来像“居中动”，但不是你想要的“左上角翻转”或“底部弹出”效果。
常见错误现象：
button {
transition: transform 0.3s ease;
}
button:hover {
transform: rotate(45deg);
}结果按钮总绕自己中心转，而不是绕左上角“翻开”。这是因为没改 transform-origin。
-
transform-origin必须和transform同时存在才生效；单独写它不会触发重绘 - 值可以是关键字（
top left）、百分比（0% 0%）、像素（10px 20px），三者等价但语义不同：百分比基于元素自身宽高，像素基于元素左上角原点 - 若元素有
border-box盒模型且含border，transform-origin的像素偏移会包含 border 宽度
transition 触发时 transform-origin 不能动态变化
很多人想实现“hover 时先切 origin 再动 transform”，比如：
a {
transform-origin: center;
transition: transform-origin 0.1s, transform 0.3s;
}
a:hover {
transform-origin: top left;
transform: rotate(90deg);
}这行不通。transform-origin 本身**不支持过渡动画**（浏览器会忽略它的 transition 声明），只会瞬间切换，导致 transform 动画仍按旧 origin 执行，视觉上出现“跳变”或“错位旋转”。
正确做法只有两种：
- 用 JavaScript 在
mouseenter时先同步设置transform-origin，再加 class 触发transform过渡（注意加setTimeout(..., 0)或requestAnimationFrame确保重排时机） - 直接在初始样式里就写好目标
transform-origin，只靠transform过渡——这是最稳定、兼容性最好的方案
transform-origin 与 will-change 的配合要点
当 transform-origin 设为非默认值（如 0 0），又频繁触发动画时，部分浏览器（尤其是旧版 Safari）可能渲染卡顿或模糊。这不是 bug，而是因为 origin 改变后，GPU 图层合成位置变了，浏览器需要重新计算图层边界。
缓解方式：
立即学习“前端免费学习笔记（深入）”；
- 对动画元素加
will-change: transform（不是will-change: transform-origin，后者无效） - 避免用小数百分比（如
49.5% 49.5%），强制浏览器做 subpixel 渲染；优先用整数像素或整数百分比 - 如果动画只在 hover 时发生，可考虑用
@media (hover: hover)包裹相关样式，防止触屏设备误触发
实际调试：如何快速验证 transform-origin 是否生效
别靠肉眼猜。打开浏览器开发者工具，在 Elements 面板选中元素，手动在 Styles 面板添加临时样式：
outline: 1px solid red; transform-origin: 0 0;然后在 console 输入：
getComputedStyle($0).transformOrigin看返回值是否匹配。再 hover 或 toggle class，观察 outline 框是否始终套在旋转中心点上——如果不是，说明
transform-origin 被父级 transform 或 perspective 干扰了（此时需检查祖先元素是否创建了新的坐标系）。
最容易被忽略的一点：只要任意祖先元素设置了 transform、filter 或 opacity < 1，就会创建包含块（containing block），导致子元素的 transform-origin 百分比值不再相对于自身，而是相对于该包含块。这时候用像素值反而更可控。
