CSS translateX() Function

Definition and Usage

CSS translateX() function allows you to reposition elements along the x-axis (horizontally).

translateX() function in transform used in the property.

Example

Reposition different <div> elements horizontally:

#myDiv1 {
  transform: translateX(50px); /* Moves the element 50px along the x-axis */
}
#myDiv2 {
  transform: translateX(100px); /* Moves the element 100px along the x-axis */
}
#myDiv3 {
  transform: translateX(-10px); /* Moves the element -10px along the x-axis */
}

Try It Yourself

CSS Syntax

translateX(x)
Value Description
x Required. Defines the distance that an element moves along the x-axis, which can be a number or a percentage.

Technical Details

Version: CSS Transforms Module Level 1

Browser Support

The numbers in the table indicate the first browser version to fully support this function.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

related page

Tutorial:CSS 2D Transformation

Reference:CSS transform attribute

Reference:CSS translate() function

Reference:CSS translateY() function

Reference:HTML DOM transform attribute