CSS translate3d() Function

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

The translate3d() function works like this:

It moves the position of the element along the x-axis, y-axis, and z-axis by the amount provided.

Move along the `x`-axis (horizontally)

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

<style>
  .translated {
    transform: translate3d(60px,0,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>

Move along the `y`-axis (vertically)

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

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

Move along the `z`-axis

Here's an example of using translate3d() to move an element along the z-axis. This moves the element towards or away from the viewer.

<style>
  .translated {
    transform: perspective(200px) translate3d(0,0,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">

You can think of the z-axis as coming out of the screen towards the viewer. Therefore, a movement along that axis won't necessarily be apparent to the viewer unless you apply other styles that bring out the effect.

In this example, I've also included the perspective function in order to demonstrate the effect of translate3d(). The result is that the element appears to be closer to the viewer than the other (non-translated) element.

Move along all Axes

Here's an example of using translate3d() to move an element along all axes:

<style>
  .translated {
    transform: perspective(200px) translate3d(60px,60px,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. This results in the element appearing further away from the user.

<style>
  .translated {
    transform: perspective(200px) translate3d(-10px,-10px,-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 translate3d() function is as follows:

Possible Values

The translate3d() function accepts a <translation-value> value for the first two arguments, and length for the third argument. All arguments specify how much the element moves along the respective planes.

The <translation-value> is a length (e.g. 10px, 10vw, etc), and 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 translate3d() 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.