Funktion translateY

Die Funktion translateY verschiebt ein Element entlang der Y-Achse. Wird zusammen mit der Eigenschaft transform verwendet. Als Wert können alle Größeneinheiten verwendet werden. Ein positiver Wert verschiebt das Element nach unten, ein negativer Wert nach oben.

Syntax

Selektor {
	transform: translateY(Verschiebung);
}

Beispiel

Wenn die Maus über den Block bewegt wird, verschiebt er sich um 30px nach unten:

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

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

Beispiel

Wenn die Maus über den Block bewegt wird, verschiebt er sich um 30px nach oben:

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

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

Siehe auch

die Funktion translate,
die eine Verschiebung entlang der X- und Y-Achse festlegt
die Funktion translateX,
die eine Verschiebung entlang der X-Achse festlegt