CSS3-Rotation – Objekte auch im IE drehen

Publiziert am by & filed under CSS, IE, Webdesign.

Der Internetexplorer gibt sich ja bekannterweise manchmal sturer als ein polnischer Ochse, wenn es um neuere Standards geht. CSS3 hat nun transform-Befehle eingefügt, mit denen es möglich ist, Objekte zu beliebig drehen. Ab der 9-er Version funktioniert das auch für den Internet Explorer. Doch was mit den Versionen davor? Nun, auch dafür gibt es bei der Webprogrammierung Tricks und Kniffe:

Werbung

Auch der IE kann Elemente drehen

Anbei mal ein Beispiel für eine 180Grad Drehung, welche in allen Browsern funktioniert.

img {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Selbst der IE dürfte damit keinerlei Probleme haben. Einziger Wermutstropfen: es sind auf diese Weise nur Drehungen im 90Grad Winkeln möglich. Dafür könnt ihr aber mit dem Mirror-Befehl eure Bilder sogar spiegeln. Natürlich lassen sich die Transform Befehle auch auf andere Elemente wie zum Beispiel div-Container oder p-Absätze anwenden. Probiert’s einfach mal aus und schreibt eure Erfahrungen.