translate() und translateZ() ermöglichen es uns, ein Element von seiner ursprünglichen Position in eine bestimmte Richtung relativ zu seiner aktuellen Position zu bewegen. Diese Funktionen sind Teil der CSS-Transform-Eigenschaft. Zusätzlich können wir translateX() und translateY() verwenden, um ein Element nur horizontal oder vertikal zu bewegen.

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 Bewegung entlang der x-Achse. Ein positiver Wert bewegt das Element nach rechts, während ein negativer Wert es nach links bewegt;
  • Y_value ist die Bewegung entlang der y-Achse. Ein positiver Wert bewegt das Element nach unten, und ein negativer Wert bewegt es nach oben;
  • Z_value ist die Bewegung entlang der z-Achse. Ein positiver Wert bewegt das Element näher zum Betrachter, und ein negativer Wert bewegt es weiter weg. Wenn Sie nur 1 oder 2 Werte angeben, wendet der Browser denselben Wert/dieselben Werte für die fehlende(n) Achse(n) an.
• translateX() und translateY() - akzeptieren jeweils 1 Wert;
  • translateX(value) gibt die horizontale Bewegung an. Ein positiver Wert bewegt das Element nach rechts, und ein negativer Wert bewegt es nach links;
  • translateY(value) gibt die vertikale Bewegung an. Ein positiver Wert bewegt das Element nach unten, und ein negativer Wert bewegt es nach oben.
• translateZ() - akzeptiert 1 Wert. Es gibt die Bewegung entlang der z-Achse an, die 3D-Transformationen erzeugen kann. Ein positiver Wert bewegt das Element näher zum Betrachter, und ein negativer Wert bewegt es weiter weg.

Lassen Sie uns überprüfen, was wir mit Hilfe dieser Funktionen erreichen können:

translate3d() Eigenschaft

Wir können auch eine 3D-Elementverschiebung mit Hilfe einer Eigenschaft hinzufügen. Allerdings haben Benutzer im Allgemeinen 2D-Bildschirme, und diese 3D-Bewegung wird unsichtbar sein. Gleichzeitig versuchen immer mehr Benutzer, die 3D-Realität zu erleben. Bald werden die meisten Benutzer Bildschirme mit 3 Dimensionen haben, und diese Eigenschaft wird nützlich sein. Die Syntax ist wie folgt:

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

Wir fügen die Verschiebung der z-Achse als letzten Wert hinzu. Ein positiver Wert ist eine Bewegung in Richtung des Benutzers. Ein negativer Wert ist eine Bewegung in Richtung vom Benutzer weg.

Lassen Sie uns das Beispiel überprüfen:

Sie haben wahrscheinlich einen 2D-Bildschirm, genau wie ich, und wir können die Verschiebung entlang der z-Achse nicht bemerken.