css transform translate

/* 使用 CSS transform 的 translate 函数来移动元素 */

/* 示例 1: 水平和垂直方向移动 */
.element {
  transform: translate(50px, 100px); /* 向右移动 50px，向下移动 100px */
}

/* 示例 2: 仅水平方向移动 */
.element {
  transform: translateX(50px); /* 向右移动 50px */
}

/* 示例 3: 仅垂直方向移动 */
.element {
  transform: translateY(100px); /* 向下移动 100px */
}

/* 示例 4: 使用百分比 */
.element {
  transform: translate(50%, 50%); /* 向右移动自身宽度的 50%，向下移动自身高度的 50% */
}

/* 示例 5: 结合其他 transform 函数 */
.element {
  transform: rotate(45deg) translate(50px, 100px); /* 先旋转 45 度，再移动 */
}

解释说明：

• translate(x, y)：用于在水平（x）和垂直（y）方向上移动元素。x 和 y 可以是像素值、百分比或其他单位。
• translateX(x)：仅在水平方向上移动元素。
• translateY(y)：仅在垂直方向上移动元素。
• 百分比值是相对于元素自身的宽度和高度来计算的。
• transform 函数可以组合使用，例如先旋转再移动。