Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

CSS3 transform: translate - verschieben, umsetzen, verrücken, versetzen von Elementen

Um ein Element zu verschieben, gibt es bei CSS3 den Befehl transform: translate. Natürlich fragt man sich, warum erst woanders platzieren und dann verschieben, wenn ich das Element nicht gleich an die gewünschte Stelle platzieren könnte. Die Antwort liegt wieder bei den Animationen (späteres Kapitel).

transform: translate - verschieben eines Elementes
transform: translate - verschieben eines Elementes

Aufbau von unserer CSS3-Anweisung transform: translate

transform: translate(Wert);
transform: translate(X-Wert, Y-Wert);

Wird nur ein Wert gesetzt, dann bezieht sich das auf die X-Achse. Wenn der zweite Wert nicht angegeben wurde, wird dieser als 0 angenommen. Es geschieht nur eine horizontale Verschiebung auf der X-Achse.

transform: translate(80px, 50px);

Es findet eine Verschiebung, um 80 Pixel nach rechts und 50 Pixel nach unten, statt. Möchte man gerne ein verschieben nach links und oben erreichen, gibt man negative Werte an.

transform: translate(-80px, -50px);

Einheiten bei translate

Die Werte können mit verschiedenen Einheiten angegeben werden. Es müssen nicht immer Pixel sein. Genauso können Prozentwerte angegeben werden. Dies hat den Vorteil, dass z.B. eine Platzierung abhängig von der Fensterbreite/-höhe, erreicht werden kann.

Alte Browser - die üblichen Präfix-Angaben

Um wieder die alten Versionen der Browser im Boot zu haben, die üblichen Angaben machen:

-webkit-transform: translate(80px, 50px);
-moz-transform: translate(80px, 50px);
-ms-transform: translate(80px, 50px);
-o-transform: translate(80px, 50px);
transform: translate(80px, 50px);
weitere eigene Projekte: