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.

3 Kommentare zu “CSS3-Rotation – Objekte auch im IE drehen”

  1. Bernie

    Hallo, Danke für die super Tipps, haben mir sehr geholfen! P.S.: “Sturer als ein polnischer Ochse” triffts da echt ziemlich genau! ;-) Gruss

  2. Kalle Kratzbaum

    Auch wenn der IE6 zum Glück nicht mehr von mir supported wird, ist es gut zu wissen dass es solche Tricks gibt. Bei dem IE7 und IE8 werden solche Features ja leider auch nur rudimentär unterstützt.

Ihr Kommentar

  • (will not be published)