Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget cursus felis. Duis sed accumsan tellus, eget cursus nisl.
Lerne HTML, CSS und JavaScript kostenlos mit der ReadyTools Academy.
Verfolge deinen Lernfortschritt, wachse in deinem Tempo und habe Spaß dabei! 🎯
In CSS wird die Translate-Transformation verwendet, um ein HTML-Element von seiner ursprünglichen Position sowohl im 2D- als auch im 3D-Raum zu verschieben oder zu verlagern. Die Translate-Transformation wird häufig als Teil der Transformations-Eigenschaft verwendet, um Animationen zu erstellen, Elemente neu zu positionieren oder andere dynamische Effekte anzuwenden.
So verwenden Sie die Translate-Transformation innerhalb der Transformations-Eigenschaft:
2D-Translation:
Um ein Element im 2D-Raum zu verschieben, verwenden Sie die Funktion translate. Sie nimmt ein oder zwei Längenwerte als Argumente, um die horizontale und vertikale Verschiebung anzugeben.
.translate-element {
transform: translate(20px, 30px);
}
In diesem Beispiel verschiebt die Klasse .translate-element das Element um 20 Pixel nach rechts und 30 Pixel nach unten von seiner ursprünglichen Position.
3D-Translation:
Für 3D-Übersetzungen können Sie translate3d oder die Funktionen translateX, translateY und translateZ verwenden, um ein Element im 3D-Raum zu verschieben.
.translate-3d-element {
transform: translate3d(50px, 0, 100px);
}
In diesem Fall verschiebt die Klasse .translate-3d-element das Element um 50 Pixel auf der X-Achse und 100 Pixel auf der Z-Achse, während die Y-Achse unverändert bleibt.
Die Translate-Transformation ist ein leistungsstarkes Werkzeug zur Erstellung dynamischer Effekte und Animationen. Sie ermöglicht das reibungslose Verschieben von Elementen auf der Webseite und kann mit anderen Transformationen wie Rotation und Skalierung kombiniert werden, um komplexe visuelle Effekte zu erzielen.
Sprache wählen
Thema wählen
© 2025 ReadyTools. Alle Rechte vorbehalten.