Fonction translateX

La fonction translateX définit le décalage d'un élément le long de l'axe X. Elle est utilisée conjointement avec la propriété transform. La valeur de la propriété peut être exprimée dans n'importe quelle unité de taille. Une valeur positive décale vers la droite, une valeur négative vers la gauche.

Syntaxe

csssélecteur {
  transform: translateX(décalage);
}

Exemple

Si vous placez la souris sur le bloc, il se décalera de 30px vers la droite :

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateX(30px);
}

Результат:

Exemple

Si vous placez la souris sur le bloc, il se décalera de 30px vers la gauche :

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateX(-30px);
}

Результат:

Voir aussi