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:

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.

Diesen Artikel teilen und empfehlen: Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • MisterWong
  • Y!GG
  • Webnews
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
Chris Donner, Autor dieses Artikels

Über den Autor dieses Artikels:

Ich, Chris Donner bin der Inhaber von Pixxelpassion und arbeite als freier Webdesigner und Referent im Bereich Suchmaschinenoptimierung. Weitere Informationen und mein Portfolio gibt's auf Pixxelpassion - oder du folgst mir auf Twitter.

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

You must be logged in to post a comment.