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:

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.

<style>
  .translated {
    transform: translateY(60px);
  }
</style>

<img src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image"> 
<img class="translated" src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image">

Negative Values

You can also provide negative values if required.

<style>
  .translated {
    transform: translateY(-60px);
  }
</style>

<img src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image"> 
<img class="translated" src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image">

Official Syntax

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

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

The translateY() function is defined in CSS Transforms Module Level 1 (W3C Working Draft)

Browser Support

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