css translatex

/* 使用 CSS translateX 进行水平移动 */

/* 示例 1: 简单的 translateX 移动 */
.element {
  transform: translateX(50px); /* 将元素向右移动 50 像素 */
}

/* 示例 2: 使用百分比进行移动 */
.element {
  transform: translateX(50%); /* 将元素向右移动其自身宽度的 50% */
}

/* 示例 3: 结合其他变换 */
.element {
  transform: translateX(50px) rotate(45deg); /* 先将元素向右移动 50 像素，再旋转 45 度 */
}

/* 示例 4: 动画效果 */
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.element {
  animation: slide 2s infinite alternate; /* 元素将在 2 秒内从初始位置滑动到 200 像素的位置，并无限循环 */
}

translateX 是 CSS 中用于沿水平方向移动元素的函数。它可以接受像素值、百分比或其他长度单位。通过 transform 属性应用此函数，可以轻松地创建动画或调整元素的位置。