CSS | translateY()函数

CSS中可以使用translate函数来进行平移、旋转、缩放、倾斜等变换操作。其中，translateY()函数用于沿垂直方向对元素进行平移。

语法

translateY(<length-percentage>)

其中，指定了平移的距离。可以使用长度单位（如px、em、rem等）或者百分比来指定平移距离。当使用百分比时，平移的距离相对于元素自身高度。

示例

/* 将元素沿Y轴平移50px */
transform: translateY(50px);

/* 将元素沿Y轴平移50%的高度 */
transform: translateY(50%);

注意事项

• translateY()函数只能作为transform属性的值使用。

• 平移距离可以是负值，表示向上方向平移。

• 如果同时使用了translate()函数的其他参数（如平移距离x轴方向的translateX()函数），那么各个参数的平移距离是同时生效的。

• translateY()函数设置的平移是相对于元素原始位置的，不会改变元素的布局位置。

总结

使用translateY()函数可以方便地对元素进行垂直方向上的平移操作，与其他transform函数（如translateX()、rotate()等）配合使用也可以实现更加复杂的变换效果。在实际开发中，可以灵活运用translate函数来实现各种动画效果，提升页面的交互性和视觉效果。