Our volunteers haven't translated this article into Română yet. Join us and help get the job done!
You can also read the article in English (US).

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

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

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 transformation in ℝ2 and can't be represented using a Cartesian-coordinate matrix.

10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]

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 Status Comment
CSS Transforms Level 1
The definition of 'translateY()' in that specification.
Working Draft Initial definition

Browser compatibility

Please see the <transform-function> data type for compatibility info.

See also

Document Tags and Contributors

Last updated by: mdnwebdocs-bot,