Bilder drehen mit CSS

Für ein aktuelles Projekt hatte ich eine knifflige Aufgabe zu lösen. Bilder sollten nicht nur dynamisch auf einer Seite positioniert werden, sondern zusätzlich auch noch dynamisch gedreht. Die Frage war, ob ich die Bilder nicht einfach mit PHP neu berechnen sollte, doch dann stieß ich doch noch auf die Information wie man das Drehen von Bildern mit CSS bewerkstelligt.

Bilder drehen mit CSS

CSS entwickelt sich immer weiter und steht aktuell mit Version 3 bereit. Dabei übernimmt CSS nun auch viel Funktionalität die man früher noch mit Javascript lösen musste. CSS bietet den Vorteil, dass es besser browserkompatibel ist, wenn es einmal korrekt implementiert wurde. Bilder drehen mit CSS geht natürlich auch. Dafür legt man eine eigene CSS Klasse an die dafür zuständig ist.

Folgender Code definiert eine CSS class für ein gedrehtes Bild:

.rotated{
  transform:rotate(5deg);
  -ms-transform:rotate(5deg); /* IE 9 */
  -moz-transform:rotate(5deg); /* Firefox */
  -webkit-transform:rotate(5deg); /* Safari and Chrome */
  -o-transform:rotate(5deg);
}

Hier wird das Bild zum Beispiel um 5 Grad gedreht. Möchte man ein Bild in die andere Richtung drehen, dann kann man hier auch negative Werte eingeben. Wie man sehen kann unterstützen nicht alle Browser diese Funktionalität so einfach. Deshalb müssen wir das Drehen auch für Internet Explorer, Firefox, Safari und Chrome explizit auch machen.

Fazit

Bilder drehen mit CSS ist recht einfach möglich. Die gezeigte Lösung ist auch Browser unabhängig gelöst und kann für jegliche Art von Webprogjekt benutzt werden.