transform-origin 决定旋转中心，默认为元素中心；设置如 top left 可让元素绕左上角旋转，结合 animation 实现精准动画效果。
在使用 CSS 动画（animation）配合 transform 实现旋转效果时，transform-origin 属性起到关键作用——它决定了元素旋转的中心点。如果不正确设置旋转中心，动画可能看起来偏离预期，比如绕着页面某个角落转而不是自身中心。
transform-origin 基础语法
transform-origin 用于定义变换（如旋转、缩放、倾斜）的基准点。默认值是 50% 50%，也就是元素的中心。
常见取值方式：
- center center 或 50% 50%：中心（默认）
- top left：左上角
- right bottom：右下角
- 20% 80%：水平方向20%，垂直方向80%
- 10px 30px：距离左边10px，顶部30px
结合 animation 实现自定义旋转动画
假设你想让一个盒子绕其左上角旋转360度，可以这样写：
立即学习“前端免费学习笔记（深入）”；
<div style="background:#f4f4f4; padding:10px; margin:10px 0; border-radius:4px;">
.keyframe-example {
width: 100px;
height: 100px;
background: #3498db;
animation: rotateAround 2s linear infinite;
transform-origin: top left; /* 关键：设置旋转中心 */
}
<p>@keyframes rotateAround {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}</p></div>这里 transform-origin: top left 明确指定旋转围绕左上角进行。若不设置，元素会默认绕中心旋转。
动态改变旋转中心
有时需要在动画过程中或不同状态下切换旋转中心。例如悬停时绕底部旋转：
<div style="background:#f4f4f4; padding:10px; margin:10px 0; border-radius:4px;">
.hover-rotate {
width: 80px;
height: 80px;
background: #e74c3c;
transition: transform-origin 0.3s ease;
}
<p>.hover-rotate:hover {
transform-origin: bottom center;
animation: spin 1s linear infinite;
}</p><p>@keyframes spin {
to { transform: rotate(360deg); }
}</p></div>注意：直接在 hover 上写 transform-origin 可以生效，但若想平滑过渡旋转中心位置，需配合 transition。不过浏览器对 transform-origin 的过渡支持有限，通常只在状态切换时立即生效。
3D 旋转中的 transform-origin 扩展
在 3D 动画中，transform-origin 还可指定 Z 轴偏移：
- transform-origin: center center 50px：Z轴向外偏移50px
- 常用于增强透视感，配合 perspective 和 rotateX/rotateY
基本上就这些。掌握 transform-origin 就能精准控制动画中元素的旋转行为，避免“乱转”现象。关键是根据设计意图设定合适的原点，再结合 keyframes 实现流畅动画。不复杂但容易忽略。
