Fonction translate

La fonction translate définit le décalage d'un élément selon l'axe X et l'axe Y. Elle est utilisée conjointement avec la propriété transform. Toute unité de taille peut être utilisée comme valeur.

Elle peut prendre un ou deux paramètres. Si il y a deux paramètres - le premier définit le décalage selon l'axe X, et le second - selon l'axe Y. S'il n'y a qu'un paramètre, alors il définit le décalage selon l'axe X.

Les valeurs des paramètres peuvent être positives ou négatives. Une valeur positive sur l'axe X décale vers la droite, une valeur négative - vers la gauche. Une valeur positive sur l'axe Y décale vers le bas, une valeur négative - vers le haut.

Syntaxe

sélecteur {
	transform: translate(décalage sur l'axe X, décalage sur l'axe Y);
}

Exemple

Si vous passez 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: translate(30px);
}

Exemple

Si vous passez 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: translate(-30px);
}

Exemple

Si vous passez la souris sur le bloc - il se décalera de 15px vers la droite et de 30px vers le bas :

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

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

Voir aussi

la fonction translateX,
qui définit le décalage selon l'axe X
la fonction translateY,
qui définit le décalage selon l'axe Y