In my workspace I've done some research on how to make effects with graphical transformations. When I Googled about it, I only found that the new Safari supports using CSS transformations. I didn't find that IE has supported these things from earlier versions (5.5) -- though with another name: Matrix filters.

So as of now, I have 2 ways to make effects with graphical transformations:

• The Safari way: using the 'transform' property of CSS (extensions to the spec and proposal too) with one of its functions: skew, translate, rotate, perspective etc. Mozilla announced that they will support that too.
• The Internet Explorer way: using the 'filter' property (extensions to the spec) set to 'DXImageTransform.Microsoft.Matrix', which gets a 2x2 matrix.

What's common to both ways is the support for passing a matrix argument. Safari's support for this option is more extensive: it can handle 3- and 4-size matrices (the latter, for 3D projection)

So making a graphical transformation is easy -- just passing a matrix and voila! -- the object is transformed. But how do I integrate it into MooTools, my JavaScript library of choice?

I've been trying very hard to integrate it into Fx.Morph so it can live side by side with other CSS properties, but I didn't succeed (yet!). So I've created a class extending Fx class and learned for the first time how to create custom effects. It is very easy, but there isn't enough documentation about this subject. There also isn't any documentation on the code specifying what each method in Fx/Fx.CSS does, so I read the code and analyzed the order of the calls to each method and looked in the source code of another custom effects of what I found while Googling on it.

The result is the Fx.Matrix class, which I added to my MUI project (Mootools UI). It supports the following functions: scale, skewX, skewY, rotate, scaleNonUniform and rotateFromVector. These transformations are the only ones which can be implemented in both the Safari and the IE way; the rest (perspective, translate, etc.) are only supported in Safari/Firefox 3.1, so I didn't implement them.

How to use the class?

First, create a instance: 
var mfx = new Fx.Matrix(element, options) -- all options are the options of Fx class.

Then you can use the set method, which makes the transformation without effects. The matrix of the transformation is passed as a parameter

mfx.set([[2,0], [0, 2]]);

This code will scale (=multiply) the element by a factor of 2. The matrix is an array containing 2 arrays of 2 values each.

A more semantic way to make this is using the `Functions` static associative array, which contains all the supported transformation matrices. Thus, the code above can be written this way:

mfx.set( Fx.Matrix.Functions.scale(2) );

To make more than one transformation at a time, you can use the `prepare` static method of Fx.Matrix, which concatenates all matrices to one matrix that can be supplied to the `set` method:

mfx.set( Fx.Matrix.prepare({
    scale: [2],
    rotate: [30] // 30 degrees
}));

The `set` method saves the matrix in Element's Storage and retrieves it when an effect is applied.

To make transformation effects (the most interesting part of this post), you need to use the `start` method and provide an object, as to Fx.Morph, containing the settings of start and end values for each transformation function you want to use:

mfx.start( {
    scale:[1, 2],
    skewX: [40],
    skewY: [50, 0]
});

You can pass one value to the function, and it will set the end value of the function. It also supports two values, of which the first is the start point and the second is the end point of the function.

View a demo of using this class.

 The demo checked on IE7/8, Firefox 3.1 beta and Safari 3.1.2 on Windows Vista.

Thanks a lot to Yuval Kaplan on fixing my English.