css translatey

作者：清梦独行发布日期:2026-04-21 浏览:155

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

/* 示例 1: 向下移动 50px */
.element {
  transform: translateY(50px);
}

/* 解释: 这里的 .element 是一个类选择器，应用了 transform 属性中的 translateY 函数，
   将元素沿 Y 轴（垂直方向）向下移动 50 像素。 */

/* 示例 2: 向上移动 20% */
.element-up {
  transform: translateY(-20%);
}

/* 解释: 这里的 .element-up 类选择器使用了负值，表示将元素沿 Y 轴向上移动其自身高度的 20%。 */

/* 示例 3: 结合其他变换 */
.element-combined {
  transform: translateX(30px) translateY(40px) rotate(15deg);
}

/* 解释: 这里不仅使用了 translateY，还结合了 translateX 和 rotate 函数，
   先将元素沿 X 轴移动 30 像素，再沿 Y 轴移动 40 像素，并旋转 15 度。 */

上一篇：css margin顺序

下一篇：css横向滚动条