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

cssSelector {
  transform: translateX(Verschiebung);
}

Beispiel

Wenn die Maus über den Block bewegt wird - 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: translateX(30px);
}

Результат:

Beispiel

Wenn die Maus über den Block bewegt wird - 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: translateX(-30px);
}

Результат:

Siehe auch