CSS3 Transformationen: Elemente rotieren über transform: rotate(Xdeg);

Jedes Element kann mit einem gewünschten Winkel, rotiert angezeigt werden. Dadurch werden spannende Effekte möglich. Zumal in der realen Welt, auch die wenigsten Dinge gerade sind. Rotiert werden können Schrift, Bilder und jedes beliebige Element über diese CSS-Anweisung.

In CSS3 gibt es eine große Gruppe an Befehlen um Elemente zu transformieren, sprich im Aussehen zu verändern. Die englische Übersetzung von transform ist: „verwandeln, überführen, umwandeln“.

Die erste Anweisung, die wir uns ansehen möchten, ist zum Rotieren von einem Element.

Die CSS3-Anweisung hat folgendes Aussehen:

transform: rotate(30deg);

Nach dem allgemeinen CSS3-Befehl transform: wird die Art der „Umwandlung“ angegeben: hier also rotieren und zwar um 30 Grad.

Dabei stehen positive Gradzahlen, für eine Drehung im Uhrzeigersinn.

Negative Gradangaben, stehen für eine Drehung gegen den Uhrzeigersinn.

Falls gerade der Gedanke kommt, warum überhaupt negative Angaben, denn wenn man lange genug im Uhrzeigersinnetwas dreht, kann man dasselbe Aussehen bekommen, als würde man es gegen den Uhrzeigersinn drehen. Also ob ich etwas um 300 Grad drehe oder um -60 Grad, sollte ja nichts am Endergebnis ändern. Allerdings haben wir später auch noch in CSS3 Befehle, um diese Drehung zu animieren und dadurch die Richtung sichtbar wird. Daher ist es doch wichtig.

rotate für alte Browserversionen

Auch hier haben viele Browserhersteller vorgegriffen und das rotieren von Elemente sehr früh eingeführt. Daher gibt es wieder die typischen Anweisungen, damit es auch mit alten Versionen der Browser funktioniert.

-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);

Wichtig ist, dass nach den speziellen für alte Browserversionen gedachtem CSS-Befehle, der allgemein als letzte kommt. Dadurch führt dann der Browser immer den zuletzt erkannten Befehl aus und der allgemein definierte ist besser als irgendwas, was auch leicht in der Umsetzung abweichen kann.

Daher bitte immer folgenden Aufbau: vom Speziellen zum Allgemeinen!

-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);

transform: rotate(30deg);

Beliebtester Fehler bei transform: rotate

Was schnell ins Auge gehen kann und man dann sich unter Umständen wundert, warum die Rotation nicht ausgeführt wird, ist ein versehentliches Leerzeichen zwischen rotate und der Klammer.

FALSCH: rotate (30deg);
RICHTIG: rotate(30deg);

Aufgabe zu transform: rotate

Um diesen CSS3-Befehl rotate zu testen, bitte folgende Aufgabe nachbauen. Wir haben hier 4 Boxen, beschriftet mit 1 bis 4 und unterschiedlichen Farben, die rotieren. Es soll folgendes Aussehen entstehen:

Zum Testen des eignen Ergebnisses immer einen aktuellen Browser verwenden (empfehlenswert ist der Google Browser Chrome).

Wer schauen mag, ob sein Browser es packt, kann das anhand von folgendem Link testen:
https://www.html-seminar.de/beispielcode/beispiel-css3-transform-rotate.htm