Objekte drehen mit CSS

Mit CSS3 haben wir die Möglichkeit, Objekte zu drehen. Wie das funktioniert möchte ich euch in diesem Artikel erklären.

Objekte drehen mit CSS

Manchmal möchten wir auf einer Website bestimmte Texte, Fotos, oder sonstige Grafiken drehen. Lange musste man sich dafür Grafiken erstellen, die man daraufhin eingebunden hat. Mit CSS3 gibt es heute eine viel sinnvollere Variante, mit der sich zudem auch Speicherplatz sparen lässt. Im Grunde benötigen wir dafür nur eine Eigenschaft: transform:rotate

Ausgangsbild

Dieses Symbol möchten wir nun um 180Grad drehen, so dass der Pfeil nach links zeigt.

CSS-Code

-moz-transform:rotate(180deg); /* Firefox 3.6 Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari */
-o-transform:rotate(180deg); /* Opera */
-ms-transform:rotate(180deg); /* IE9 */
transform:rotate(180deg); /* W3C */

Die verschiedenen Angaben stehen für die Kompabilität mit den verschiedenen Browsern.

Ergebnis

So einfach ist es, in CSS Objekte zu drehen. Alternativ müsste man, wie oben beschrieben, für unterschiedliche Richtungen verschiedene Grafiken erstellen. Die Vorteile sind eindeutig:

• Es wird nur eine Grafik benötigt, die beliebig gedreht werden kann. Dadurch spart man Speicherplatz
• Änderungen können schneller durchgeführt werden. Es reicht nur eine Ergänzung im CSS-Code

In dem Sinne, bis zum nächsten Artikel!