CSS: Text/Objekte rotieren

Ab und an hat man mal die Vorgabe, das ein Objekt oder Text gedreht werden soll. Z.B. ein Menü in dem die einzelnen Menüpunkte 45° schräg stehen. Mit CSS3 prinzipell kein Problem, nur der IE braucht wieder etwas gesonderte Unterstützung…

Im Standard wird hier die transform-Eigenschaft verwendet:

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

Damit das das auch im IE 6, 7 und 8 funktioniert muß zusätzlich der Matrix Filter eingesetzt werden. Die Nutzung unterscheidet sich im Syntax auch noch in den IE-Versionen, weshalb es zwei weiterer Zeilen bedarf:

.text45 {
/* IE8+ - must be on one line, unfortunately */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
   
/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix(
         M11=0.7071067811865483,
         M12=0.7071067811865467,
         M21=-0.7071067811865467,
         M22=0.7071067811865483,
         SizingMethod='auto expand');
} 

Damit man das nicht selbst mühevoll umrechnen muß, gibt es hier einen Online-Editor der einem diese Aufgabe abnimmt! 🙂

Insgesamt ist es also möglich, Elemente auch in allen Browsern zu drehen, das folgende Beispiel sollte also in allen Browsern funktionieren: