Elemente 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()
undtranslateY()
– 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.css
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.css
Sie verfügen wahrscheinlich wie ich über einen 2D-Bildschirm, und wir können die Verschiebung entlang der z-Achse nicht wahrnehmen.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.04
Elemente 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()
undtranslateY()
– 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.css
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.css
Sie verfügen wahrscheinlich wie ich über einen 2D-Bildschirm, und wir können die Verschiebung entlang der z-Achse nicht wahrnehmen.
Danke für Ihr Feedback!