Die Aufgabe: Eine diagonal verlaufende Navigation. Aber wie lässt sich so ein Entwurf browserübergreifend umsetzen? Firefox, Safari und Google Chrome können das – über transform:rotate, aber wie schaut es mit dem Internet Explorer aus? Eigentlich kann der Internet Explorer das schon wesentlich länger – über den Matrix Filter. Nur diesen Filter einzusetzen ist alles andere als trivial, anstatt über eine Gradangabe, muß man bein Matrix Filter mit Sinus und Cosius Angaben arbeiten. D.h. man kommt nicht umhin, jedesmal eine komplexe Berechnung durchzuführen.
Genau genommen kennt der IE zwei, nein drei Varianten, um ein Element zu rotieren. Zum einen gibt es den writing-mode. Seit der Version 7 unterstützt der IE eine Vielzahl von “Schreibrichtungen“, aber diese Rotationen sind immer 90 Grad Rotationen. Ähnlich begrenzt ist der BasicImage Filter, hier gibt es für die Rotation nur vier erlaubte Werte (0,1,2,3) – die das Element dann um 0, 90, 180 oder 270 Grad drehen. In meinem Fall hatte die Navigation aber einen Neigungsgrad von -1.5, da blieb nur die Matrix. Es ergibt sich folgende CSS Notation:
-moz-transform:rotate(-1.5deg);
-webkit-transform:rotate(-1.5deg);
-o-transform:rotate(-1.5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
sizingMethod='auto expand',
M11=0.9996573249755573,
M12=0.026176948307873055,
M21=-0.026176948307873055,
M22=0.9996573249755573
);Nicht wirklich intuitiv. Um ein Objekt über den Matrix-filter zu rotieren, beschreibt man die Winkelverhältnisse, die sich ergeben. Da sich in CSS nicht rechnen lässt, bleibt einem nur der Taschenrechner, oder ein paar Zeilen JavaScript:
function getMatrix(deg) {
var deg2radians = Math.PI * 2 / 360;
var rad = deg * deg2radians ;
var cos = Math.cos(rad);
var sin = Math.sin(rad);
return [cos,-sin,sin,cos];
}Ein entsprechendes Beispiel befindet sich hier. Es sei noch anzumerken, dass die Darstellungsqualität von Tex bei solchen Rotationen m Firefox (3.6.7 Windows XP, 3.5 Ubuntu) und Safari (4.0.3 Windows XP) miserabel ist. Die Buchstaben wirken zerfranst, oder “hüpfen”, d.h. sie laufen nicht sauber auf einer Linie. Chrome (5.0.3 Windows XP) und Internet Explorer (7,8 Windows XP) hingegen lieferten ein erstaunlich gutes Ergebnis.
Tags: CSS3, Javascript