CSS - 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.

Examples

HTML

Copy Code

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

CSS

Copy Code

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

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

Result

Syntax

CSS

Copy Code

translateY(t)

Description

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).

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

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
A translation is not a linear transform in ℝ² and cannot be represented using a matrix in the cartesian coordinates system.	$(\begin{matrix} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & t \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
	`[1 0 0 1 0 t]`

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/transform-function/translatey

CSS CSS Transforms NeedsCompatTable Reference