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.

ThetranslateY()CSS function repositions an element vertically on the 2D plane. Its resultis a<transform-function> data type.

Try it

transform: translateY(0);

transform: translateY(42px);

transform: translateY(-2.1rem);

transform: translateY(3ch);

<section>  <img          src="/shared-assets/images/examples/firefox-logo.svg"    width="200" />  <img          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 totranslate(0, ty) ortranslate3d(0, ty, 0).

Syntax

css

/* <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 thetranslating vector [0, ty]. InCartesian coordinate system it represents shift along y-axis. A percentage value refers to the height of the reference box defined by thetransform-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.	$(\begin{matrix} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{matrix}) \left( \begin{array}{ccc} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{array} \right)$	$(\begin{matrix} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{matrix}) \left( \begin{array}{ccc} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{array} \right)$	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & t \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix}) \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

html

<div>Static</div><div>Moved</div><div>Static</div>

CSS

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

Help improve MDN

Learn how to contribute

This page was last modified onNov 6, 2025 byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換