CSS translateY() Function

The CSS translateY() function is used to move elements in a two-dimensional space along the y-axis (vertically).

The translateY() function works like this:

translateY(t)

It moves the position of the element on the vertical plane by the amount provided by t.

Example

Here's an example of using translateY() to move an element vertically.

Negative Values

You can also provide negative values if required.

Official Syntax

The official syntax of the translateY() function is as follows:

translateY() = translateY( <translation-value> )

Possible Values

The translateY() function accepts the <translation-value> argument.

The value is a length (e.g. 10px, 10vw, etc) that defines how much the element will move by.

It can can also be a number without a unit identifier. In this case the number gets interpreted as "user unit". A user unit in the the initial coordinate system is equivalent to the parent environment's notion of a pixel unit.

CSS Specifications

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.