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

cssSelektor {
  transform: translateY(Verschiebung);
}

Beispiel

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

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

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

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

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

Результат:

Siehe auch