Fonction CSS translateX()

Définition et utilisation

CSS translateX() La fonction permet de répositionner l'élément le long de l'axe x (direction horizontale).

translateX() La fonction est transform utilisé dans l'attribut.

Exemple

Répositionnez différemment les éléments <div> dans la direction horizontale :

#myDiv1 {
  transform: translateX(50px); /* Déplace l'élément le long de l'axe x de 50px */
}
#myDiv2 {
  transform: translateX(100px); /* Déplace l'élément le long de l'axe x de 100px */
}
#myDiv3 {
  transform: translateX(-10px); /* Déplace l'élément le long de l'axe x de -10px */
}

Essayez-le vous-même

Syntaxe CSS

translateX(x)
Valeur Description
x Obligatoire. Définit la distance de déplacement de l'élément le long de l'axe x, qui peut être un nombre ou un pourcentage.

Détails techniques

Version : Module CSS Transforms Niveau 1

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

page liée

Tutoriel :Transformation 2D CSS

Référence :Attribut transform CSS

Référence :Fonction translate() CSS

Référence :Fonction translateY() CSS

Référence :Attribut transform HTML DOM