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

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

Exemple

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

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

#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 :

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

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

Voir aussi

la fonction translate,
qui définit le décalage le long des axes X et Y
la fonction translateY,
qui définit le décalage le long de l'axe Y