translate() - 平移变换

语法说明

transform: translate(x, y);

• x - X 轴方向的偏移量（正值向右，负值向左）
• y - Y 轴方向的偏移量（正值向下，负值向上）
• 如果只提供一个值，则 Y 轴偏移量默认为 0

示例 1：向右下移动

将元素向右移动 100px，向下移动 50px

.box {
  transform: translate(100px, 50px);
  /* 向右 100px，向下 50px */
}

示例 2：向左上移动

使用负值可以向相反方向移动

.box {
  transform: translate(-100px, -50px);
  /* 向左 100px，向上 50px */
}

示例 3：使用百分比

百分比值相对于元素自身的尺寸计算

.box {
  transform: translate(50%, 100%);
  /* 向右移动自身宽度的 50%，向下移动自身高度的 100% */
}