translate() und translateZ() ermöglichen das Verschieben eines Elements von seiner ursprünglichen Position in eine bestimmte Richtung relativ zu seiner aktuellen Position. Diese Funktionen sind Teil der CSS-Eigenschaft transform. Zusätzlich können translateX() und translateY() verwendet werden, um ein Element ausschließlich horizontal oder vertikal zu verschieben.

transform: translate(X_value, Y_value, Z_value);
transform: translateX(value);
transform: translateY(value);
transform: translateZ(value);

• translate() – akzeptiert bis zu 3 Werte;
  • X_value ist die Verschiebung entlang der x-Achse. Ein positiver Wert verschiebt das Element nach rechts, ein negativer Wert nach links;
  • Y_value ist die Verschiebung entlang der y-Achse. Ein positiver Wert verschiebt das Element nach unten, ein negativer Wert nach oben;
  • Z_value ist die Verschiebung entlang der z-Achse. Ein positiver Wert verschiebt das Element näher zum Betrachter, ein negativer Wert weiter weg. Wenn nur 1 oder 2 Werte angegeben werden, verwendet der Browser denselben Wert für die fehlende(n) Achse(n).
• translateX() und translateY() – akzeptieren jeweils 1 Wert;
  • translateX(value) gibt die horizontale Verschiebung an. Ein positiver Wert verschiebt das Element nach rechts, ein negativer Wert nach links;
  • translateY(value) gibt die vertikale Verschiebung an. Ein positiver Wert verschiebt das Element nach unten, ein negativer Wert nach oben.
• translateZ() – akzeptiert 1 Wert. Gibt die Verschiebung entlang der z-Achse an, wodurch 3D-Transformationen möglich sind. Ein positiver Wert verschiebt das Element näher zum Betrachter, ein negativer Wert weiter weg.

Sehen wir uns an, was sich mit Hilfe dieser Funktionen erreichen lässt:

translate3d()-Eigenschaft

Mit einer einzigen Eigenschaft kann auch eine 3D-Verschiebung eines Elements hinzugefügt werden. In der Regel verfügen Benutzer jedoch über 2D-Bildschirme, sodass diese 3D-Bewegung unsichtbar bleibt. Gleichzeitig versuchen immer mehr Nutzer, eine 3D-Realität zu erleben. Daher werden bald die meisten Nutzer Bildschirme mit drei Dimensionen besitzen, wodurch diese Eigenschaft nützlich wird. Die Syntax lautet wie folgt:

transform: translate3d(X_value, Y_value, Z-value);

Die Verschiebung entlang der z-Achse wird als letzter Wert hinzugefügt. Ein positiver Wert bewirkt eine Bewegung in Richtung des Nutzers. Ein negativer Wert bewirkt eine Bewegung vom Nutzer weg.

Sehen wir uns das Beispiel an:

Sie verfügen wahrscheinlich wie ich über einen 2D-Bildschirm, und wir können die Verschiebung entlang der z-Achse nicht wahrnehmen.