Fonction translateY

La fonction translateY définit le déplacement d'un élément sur l'axe Y. 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éplace vers le bas, une valeur négative - vers le haut.

Syntaxe

sélecteur {
	transform: translateY(déplacement);
}

Exemple

Si vous passez la souris sur le bloc - il se déplacera de 30px vers le bas :

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

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

Exemple

Si vous passez la souris sur le bloc - il se déplacera de 30px vers le haut :

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

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

Voir aussi

la fonction translate,
qui définit le déplacement sur les axes X et Y
la fonction translateX,
qui définit le déplacement sur l'axe X