transform-origin - CSS 动画教程

什么是 transform-origin？

transform-origin 定义了变换的原点（中心点）。所有的 transform 变换（旋转、缩放、倾斜）都围绕这个点进行。

默认值：center center（元素的中心点，即 50% 50%）
影响范围：影响 rotate、scale、skew 等所有变换
不影响：translate 平移不受原点影响

语法说明

.element {
  transform-origin: x y z;
}

x - 水平位置（left, center, right, 百分比, 像素）
y - 垂直位置（top, center, bottom, 百分比, 像素）
z - Z 轴位置（可选，用于 3D 变换）

/* 关键字 */
transform-origin: center;          /* 中心（默认） */
transform-origin: top left;       /* 左上角 */
transform-origin: bottom right;   /* 右下角 */

/* 百分比 */
transform-origin: 50% 50%;        /* 中心 */
transform-origin: 0% 0%;          /* 左上角 */
transform-origin: 100% 100%;      /* 右下角 */

/* 像素值 */
transform-origin: 50px 50px;      /* 距离左上角 50px */

旋转原点演示

悬停查看不同原点的旋转效果（红点表示旋转中心）

左上

top left

上中

top center

右上

top right

左中

center left

中心

center（默认）

右中

center right

左下

bottom left

下中

bottom center

右下

bottom right

示例 1：时钟指针

指针从顶部旋转，模拟时钟效果

.clock-hand {
  transform-origin: center top; /* 指针从顶部旋转 */
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

示例 2：缩放原点

不同原点的缩放效果

左上角缩放

悬停

中心缩放

悬停

右下角缩放

悬停

.box:hover {
  transform: scale(1.5);
}

/* 从左上角放大 */
.box-1 { transform-origin: top left; }

/* 从中心放大（默认） */
.box-2 { transform-origin: center; }

/* 从右下角放大 */
.box-3 { transform-origin: bottom right; }

常见应用场景

🕐 时钟指针：从底部或顶部旋转
📱 下拉菜单：从顶部展开（scale 或 rotate）
🎯 工具提示：从箭头位置展开
🎪 翻转卡片：从边缘翻转
🎨 图片缩放：从特定角落放大
🎮 游戏元素：围绕特定点旋转

重要注意事项

translate 不受影响：transform-origin 只影响 rotate、scale、skew，不影响 translate 平移

百分比参考：百分比是相对于元素自身的尺寸，0% 0% 是左上角，100% 100% 是右下角
3D 变换：可以设置第三个值控制 Z 轴原点，如 transform-origin: 50% 50% 100px
组合变换：多个变换共享同一个原点
动画中使用：原点在动画过程中保持不变

等价写法对照表

/* 关键字 vs 百分比 vs 像素（假设元素 100x100px） */
transform-origin: top left      = 0% 0%       = 0px 0px
transform-origin: top center    = 50% 0%      = 50px 0px
transform-origin: top right     = 100% 0%     = 100px 0px
transform-origin: center left   = 0% 50%      = 0px 50px
transform-origin: center        = 50% 50%     = 50px 50px
transform-origin: center right  = 100% 50%    = 100px 50px
transform-origin: bottom left   = 0% 100%     = 0px 100px
transform-origin: bottom center = 50% 100%    = 50px 100px
transform-origin: bottom right  = 100% 100%   = 100px 100px

transform-origin - 变换原点