translateX()

La fonction CSS translateX() permet d'appliquer une translation en 2D. La valeur obtenue sera du type <transform-function>.

Note : translateX(tx) est Ă©quivalent Ă  translate(tx, 0) ou translate3d(tx, 0, 0).

Syntaxe

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

Values

<length-percentage>

Une valeur exprimant une longueur (type <length>) ou un pourcentage (<percentage>) qui représente la composante horizontale du vecteur de translation. Lorsque la valeur est un pourcentage, elle est relative à la largeur de la boßte de référence définie par la propriété transform-box.

CoordonnĂ©es cartĂ©siennes sur ℝ2 CoordonnĂ©es homogĂšnes sur ℝℙ2 CoordonnĂ©es cartĂ©siennes sur ℝ2 CoordonnĂ©es homogĂšnes sur ℝℙ2

Une translation n'Ă©tant pas une transformation linĂ©aire pour ℝ2, elle ne peut pas ĂȘtre reprĂ©sentĂ©e par une matrice avec des coordonnĂ©es cartĂ©siennes.

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]

Syntaxe formelle

translateX([`<length-percentage>`](/fr/docs/Web/CSS/length-percentage))

Exemples

HTML

<div>Statique</div>
<div class="moved">Déplacé</div>
<div>Statique</div>

CSS

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

.moved {
  transform: translateX(10px); /* Équivalent à translate(10px) */
  background-color: pink;
}

RĂ©sultat

Spécifications

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

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi