CSS translate() Function

The CSS translate() function is used to move elements in a two-dimensional space.

The translate() function works like this:

It moves the position of the element on the plane by the amount provided by tx and ty.

The translate() function accepts two arguments, indicating how much to move the element along the x and y axes respectively.

If only one value is supplied, the second value has a zero value.

Translate along the `x`-axis

Here's an example of using translate() to move an element along the x-axis (horizontally).

<style>
  .translated {
    transform: translate(60px, 0);
  }
  div {
   	background: orange; 
  }
  div:after {
   	content: "\2190 x-axis \2192";
    float: right;
  } 
</style>

<div>
  <img src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image"> 
</div>
<div>
  <img class="translated" src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image">
</div>

Translate along the `y`-axis

Here's an example of using translate() to move an element along the y-axis (vertically).

<style>
  .translated {
    transform: translate(0, 50px);
  }
</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">

Translate along Both Axes

Here's an example of using translate() to move an element along both the x-axis and the y-axis (horizontally and vertically).

<style>
  .translated {
    transform: translate(50px, 50px);
  }
</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: translate(-30px, -25px);
  }
</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 translate() function is as follows:

Possible Values

The translate() 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 translate() 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.