translateX()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The translateX() CSS function repositions an element horizontally on the 2D plane. Its result is a data type.

Try it

transform: translateX(0);

transform: translateX(42px);

transform: translateX(-2.1rem);

transform: translateX(3ch);

#static-element {
  opacity: 0.4;
  position: absolute;
}

#example-element {
  position: absolute;
}

Note: translateX(tx) is equivalent to translate(tx, 0) or translate3d(tx, 0, 0).

Syntax

css

/*  values */
transform: translateX(200px);
transform: translateX(50%);

Values

: Is a or representing the abscissa (horizontal, x-component) of the translating vector [tx, 0]. In Cartesian coordinate system it represents shift along x-axis. A percentage value refers to the width of the reference box defined by the transform-box property.

Cartesian coordinates on ℝ^2	Homogeneous coordinates on ℝℙ^2	Cartesian coordinates on ℝ^3	Homogeneous coordinates on ℝℙ^3
A translation is not a linear transformation in ℝ^2 and can't be represented using a Cartesian-coordinate matrix.	$\left( \begin{array}{ccc} 1 & 0 & t \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} 1 & 0 & t \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{cccc} 1 & 0 & 0 & t \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$
	`[1 0 0 1 t 0]`

Formal syntax

 = 
  translateX(  )  

 = 
        |

Examples

HTML

html

Static
Moved
Static

CSS

css

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateX(10px); /* Equal to translate(10px) */
  background-color: pink;
}

Result

Specifications

Specification
CSS Transforms Module Level 1 # funcdef-transform-translatex