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

cssSelektor {
  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:

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

css#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:

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

css#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:

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

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

Результат:

Siehe auch