Vor einiger Zeit haben Mozilla und Apple CSS-Transforms in die Vorabversionen ihrer Browser eingebaut, mit denen sich HTML-Elemente beliebig drehen und verzerren lassen. Als ich kürzlich darüber schrieb, merkte bereits ein Kommentator an, dass es so etwas entfernt ähnliches in Form eines Filters auch für den Internet Explorer gibt. Und hier ist wie bestellt die Javascript-Bibliothek dafür.
Es werden die Transformationen scale
, skewX
, skewY
, rotate
, scaleNonUniform
und rotateFromVector
unterstützt. Und man kann das ganze sogar animieren. Ein Beispiel:
var mfx = new Fx.Matrix($('foo')) mfx.set( Fx.Matrix.Functions.scale(2) );
Das skaliert das Element foo
um den Faktor 2 – im Firefox 3.1 und Safari mit CSS-Transforms, im IE mit dem Matrixfilter. Eine Demo gibt es auch, die natürlich nur im Internet Explorer, Safari oder FF3.1 funktioniert.
Dieses Script ist einerseits cool (v.a. weil es für Mootools ist), andererseits kann ich mir auch keinen besseren Weg vorstellen, eine Website mit butterweich rotierenden, skalierenden und durch die Gegend taumelnden Elementen zu verschandeln. Da muss man wohl mit gehörig Augenmaß herangehen.
Preisfrage: War es nicht so, dass IE8 alle Filter abschafft, weil die auf hasLayout aufbauen? In dem Fall wäre die ganze Sache natürlich wieder für die Katz’ … aber das hab ich jetzt nicht genau recherchiert!
Kommentare (3)
John ¶
3. November 2008, 13:57 Uhr
Filter werden beim IE 8 weiterhin verwendet. -ms-filter heißt die neue Bezeichnung, aus Kompatibilitätsgründen soll im IE 8 aber auch »filter« ohne Vendor-Kürzel funktionieren. Aus Gründen der Standardkonformität muß der komplette Filter dann in Anführungszeichen gesetzt werden.
Grundsätzlich gibts Filter also weiterhin.
http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx
Die Notwendigkeit opacity, aber weiterhin über drei Krücken anzusprechen und dafür das eigentliche »opacity« außen vor zu lassen, ist allerdings schon wieder ein Stück aus dem Tollhaus.
Nico ¶
3. November 2008, 21:39 Uhr
Im IE8 funktioniert das bei mir und sieht genauso aus, wie im Safari.
Oli ¶
17. November 2008, 09:45 Uhr
Toller Blog, tolles CSS Layout gefällt mir. Tolle Ideen weiter so gruß Oliver