/* <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

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.

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

See also

Last modified: Jan 31, 2022, by MDN contributors