Funktion translateX

Die Funktion translateX verschiebt ein Element entlang der X-Achse. Wird zusammen mit der Eigenschaft transform verwendet. Als Wert können alle Größeneinheiten verwendet werden. Ein positiver Wert verschiebt nach rechts, ein negativer - nach links.

Syntax

Selector {
	transform: translateX(Verschiebung);
}

Beispiel

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

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

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

Beispiel

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

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

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

Siehe auch

die Funktion translate,
die die Verschiebung entlang der X- und Y-Achse angibt
die Funktion translateY,
die die Verschiebung entlang der Y-Achse angibt