CSS transform: translateX()

The CSS translateX() function is used to define the transform property, to move an element right/left on x-axis. The figure given below, shows how the translation of an element on x-axis performs:

css translateX

For example:

HTML with CSS Code
<!DOCTYPE html>
      div{width: 120px; height: 60px; background: peru; margin: auto;}
      .b{transform: translateX(20px);}
      .c{transform: translateX(-20px);}
      .d{transform: translateX(60px);}
      .e{transform: translateX(-60px);}
   <h2>Without translateX()</h2>
   <div class="a"></div>

   <div class="b"></div>

   <div class="c"></div>

   <div class="d"></div>

   <div class="e"></div>

Without translateX()





CSS translateX() Syntax

The syntax of translateX() function in CSS, is:

transform: translateX(length)

Note - Length units that can be used in CSS, are defined in its separate tutorial.

The following figure shows two 3D boxes (Dice). The first one is a normal die, whereas I've applied the transform: translateX(40px) to the front face (the face with value 1) of the second die.

css translateX example

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!