Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Elemente für Dynamische Effekte Verschieben | Transformation von Elementen mit CSS
Fortgeschrittene CSS-Techniken

bookElemente für Dynamische Effekte Verschieben

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:

index.html

index.html

index.css

index.css

copy

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:

index.html

index.html

index.css

index.css

copy

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

question mark

Mit welcher Funktion kann das Element von seiner Ursprungsposition um 30px nach unten verschoben werden?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 5

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.04

bookElemente für Dynamische Effekte Verschieben

Swipe um das Menü anzuzeigen

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:

index.html

index.html

index.css

index.css

copy

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:

index.html

index.html

index.css

index.css

copy

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

question mark

Mit welcher Funktion kann das Element von seiner Ursprungsposition um 30px nach unten verschoben werden?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 5
some-alt