Funktion translate

Die Funktion translate legt die Verschiebung eines Elements entlang der X- und Y-Achse fest. Wird in Verbindung verwendet mit der Eigenschaft transform. Als Wert der Eigenschaft dienen beliebige Einheiten für Größen.

Kann einen oder zwei Parameter annehmen. Wenn es zwei Parameter sind - legt der erste Parameter die Verschiebung entlang der X-Achse fest, und der zweite - entlang der Y-Achse. Wenn nur ein Parameter angegeben ist, dann legt dieser die Verschiebung entlang der X-Achse fest.

Die Parameterwerte können positiv und negativ sein. Ein positiver Wert entlang der X-Achse verschiebt nach rechts, ein negativer - nach links. Ein positiver Wert entlang der Y-Achse verschiebt nach unten, ein negativer - nach oben.

Syntax

Selektor {
	transform: translate(Verschiebung entlang der X-Achse, Verschiebung entlang der Y-Achse);
}

Beispiel

Wenn man mit der Maus auf den Block zeigt - verschiebt er sich um 30px nach rechts:

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

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

Beispiel

Wenn man mit der Maus auf den Block zeigt - verschiebt er sich um 30px nach links:

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

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

Beispiel

Wenn man mit der Maus auf den Block zeigt - verschiebt er sich um 15px nach rechts und um 30px nach unten:

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

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

Siehe auch

die Funktion translateX,
die die Verschiebung entlang der X-Achse festlegt
die Funktion translateY,
die die Verschiebung entlang der Y-Achse festlegt