CSS

translateY()

translateY()

translateY() CSS函数在2D平面中垂直方向上重新定位元素。

注意: translateY(ty)相当于translate(0, ty)translate3d(0, ty, 0)

语法

translateY(t)

可能值

t是表示平移向量的纵坐标的<length>值。

Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
A translation is not a linear transform in ℝ2 and cannot be represented using a matrix in the Cartesian coordinate system.10001t00110001t0011000010t00100001

| 1 0 0 1 0 t |

实例

HTML

<div>Static</div> <div class="moved">Moved</div> <div>Static</div>

CSS

div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translateY(10px background-color: pink; }

结果

另见

  • transform

  • <transform-function>