translateY()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The translateY() CSS function repositions an element vertically on the 2D plane. Its result is a <transform-function> data type.

Try it

transform: translateY(0);

transform: translateY(42px);

transform: translateY(-2.1rem);

transform: translateY(3ch);

<section id="default-example">
  <img
    class="transition-all"
    id="static-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

#static-element {
  opacity: 0.4;
  position: absolute;
}

#example-element {
  position: absolute;
}

Note: translateY(ty) is equivalent to translate(0, ty) or translate3d(0, ty, 0).

Syntax

/* <length-percentage> values */
transform: translateY(200px);
transform: translateY(50%);

Values

<length-percentage>: The value is a <length> or <percentage> representing the ordinate (vertical, y-coordinate) of the translating vector [0, ty]. In Cartesian coordinate system it represents shift along y-axis. A percentage value refers to the height of the reference box defined by the transform-box property.

Cartesian coordinates on ℝ^2	Homogeneous coordinates on ℝℙ^2	Cartesian coordinates on ℝ^3	Homogeneous coordinates on ℝℙ^3
A translation is not a linear transformation in ℝ^2 and can't be represented using a Cartesian-coordinate matrix.	$\left( \begin{array}{ccc} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & t \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$
	`[1 0 0 1 0 t]`

Formal syntax

<translateY()> = 
  translateY( <length-percentage> )  

<length-percentage> = 
  <length>      |
  <percentage>

Examples

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;
}

Result

Specifications

Specification
CSS Transforms Module Level 1 # funcdef-transform-translatey

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`translateY`	1	12	3.5	10.5	3.1	18	4	11	3.2	1.0	2