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

/* <length-percentage> values */ transform: translateX(200px); transform: translateX(50%); 

translateX()

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

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

Syntax

/* <length-percentage> values */ transform: translateX(200px); transform: translateX(50%); 

Values

<length-percentage>

Is a <length> or <percentage> representing the abscissa of the translating vector. 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.	( 1 0 t 0 1 0 0 0 1 )	( 1 0 t 0 1 0 0 0 1 )	( 1 0 0 t 0 1 0 0 0 0 1 0 0 0 0 1 )
	[1 0 0 1 t 0]

Formal syntax

translateX(<length-percentage>) 

Examples

HTML

<div>Static</div> <div class="moved">Moved</div> <div>Static</div> 

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

See also

translate() translateY() transform <transform-function>

Last modified: Jan 31, 2022, by MDN contributors

Select your preferred language English (US)Français日本語中文 (简体) Change language