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

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

CSS

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

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

Syntax

CSS
`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 ℝ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]`

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