css 过渡与 transform-origin 的结合_调整过渡动画的起点

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: tr

  

  ansform（不是 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 ，就会创建包含块（containing block），导致子元素的 transform-origin 百分比值不再相对于自身，而是相对于该包含块。这时候用像素值反而更可控。