Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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);

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe