CSS translateX() Function

The CSS translateX() function is used to move elements in a two-dimensional space along the x-axis (horizontally).

The translateX() function works like this:

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

Example

Here's an example of using translateX() to move an element horizontally.

<style>
  .translated {
    transform: translateX(60px);
  }
  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>

Negative Values

You can also provide negative values if required.

<style>
  .translated {
    transform: translateX(-60px);
  }
  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>

Official Syntax

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

Possible Values

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