translateY()

The translateY() CSS function moves the element vertically on the plane. This transformation is characterized by a <length> defining how much it moves vertically.

translateY(ty) is a shortcut for translate(0, ty).

Syntax

translateY(t)

Values

t

Is a <length> representing the ordinate of the translating vector.

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
A translation is not a linear transform in ℝ2 and cannot be represented using a matrix in the cartesian coordinates system.	$\left(\begin{array}{cc}10& 0\\ 01& t\\ 0& 0& 1\end{array}\right)$	$$ \left(\begin{array}{cc}10& 0\\ 01& t\\ 0& 0& 1\end{array}\right)$$	$\left(\begin{array}{ccc}10& 0& 0\\ 01& 0& t\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right)$
	[1 0 0 1 0 t]

Examples

HTML

<p>foo</p>
<p class="transformed">bar</p>
<p>foo</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: translateY(10px);
  background-color: blue;
}

Result