Monday, November 3rd, 2008

Fx.Matrix: Wrapping CSS transforms and IE filters

Category: MooTools

Nir Tayeb, a Web developer in Israel, has written up a new Mootools Fx effect class that creates a linear transformation effect using the new transform CSS property (of Safari and Firefox) and or the IE Matrix filter:

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.

You can do matrix work, or do a full transformation with code as simple as:


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

Check out the live demo to see a simple transformation.

Posted by Dion Almaer at 6:38 am
Comment here

4 rating from 26 votes

Comments Here »

Comments feed TrackBack URI

Leave a comment

You must be logged in to post a comment.