transform-origin用于设置动画的变形基准点，默认为元素中心，通过调整该属性可精确控制旋转、缩放等变换的支点位置。示例中.hamburger设置transform-origin: left center，使旋转动画从左侧中点开始，更真实模拟菜单展开。当transform包含多个操作时，transform-origin会影响整个变换顺序，建议显式定义并结合嵌套元素或拆分动画优化控制。响应式场景下可通过媒体查询动态调整origin，如移动端设为bottom以贴合视觉焦点。合理使用transform-origin能显著提升CSS动画的精准度与真实感，是animation的重要配合属性。
在CSS中，animation 和 transform-origin 经常配合使用，用来控制动画元素的变形中心点。如果不设置 transform-origin，变形（如旋转、缩放）默认以元素的中心（50% 50%）为基准点，这在很多动画场景下并不理想。通过调整 transform-origin，你可以精确控制动画中变换的“支点”位置。
理解 transform-origin 的作用
transform-origin 定义了元素进行 transform 操作时的参考原点。比如：
- 旋转（rotate）会围绕这个点转
- 缩放（scale）会从这个点向外或向内展开
- 倾斜（skew）也会以此点为轴心变形
它的值可以是关键词（如 top、left、center）、百分比或具体长度单位。
.box {
transform-origin: top left;
}
表示该元素的所有变换都以左上角为基准点。
立即学习“前端免费学习笔记（深入）”；
与 animation 配合实现精准动画
当你在 @keyframes 中使用 transform（如旋转菜单、翻牌效果），transform-origin 能让动画更符合设计预期。
.hamburger {
width: 30px;
height: 3px;
background: black;
margin: 6px 0;
transition: 0.3s;
transform-origin: left center;
}
.hamburger.open {
animation: rotateLine 0.4s forwards;
}
@keyframes rotateLine {
to {
transform: rotate(45deg);
}
}
这里设置 transform-origin: left center，让线条从左侧中点旋转，模拟真实的汉堡菜单展开动效。
处理多个 transform 的顺序问题
注意：如果 transform 在 keyframes 中包含多个操作（如先缩放再旋转），transform-origin 会影响整个变换链。浏览器会先根据 transform-origin 确定坐标系，再依次执行 transform 函数。
- 始终在动画元素上显式设置
transform-origin - 若需要复杂动效，可拆分动画或使用嵌套元素分别控制 origin
- 调试时可用
outline或背景色辅助定位 origin 位置
响应式动画中的动态 origin
在不同屏幕尺寸下，可能需要调整 transform-origin 以适配布局。可通过媒体查询动态设置：
@media (max-width: 768px) {
.card {
transform-origin: bottom;
}
}
这样在移动端翻转卡片时，能更好地贴合视觉焦点。
基本上就这些。合理使用 transform-origin 能大幅提升 CSS 动画的真实感和可控性，尤其是在涉及旋转、翻转等变换时，它和 animation 是一对关键搭档。不复杂但容易忽略。
