year of moo

Element rotation using Fx.Rotate

Perform quick and dirty rotations using the Fx.Rotate plugin

Yearofmoo.com has now released the Fx.Rotate plugin which allows for cross-browser rotation using CSS3 transforms and IE filter properties. The class itself is a subclass of the super powerful MooTools Fx class which provides tons of functionality for controlled transitions and callbacks.

Last Updated

This page was last updated on July 28th 2011 and was first published on July 28th 2011

Why?

Most of the plugins for JavaScript rotation are really basic. This plugin allows for a whole bunch of stuff. Plus it also takes care of older browsers and then some :]

Quick Example

Here is a quick example to show how simple, yet powerful, the features that Fx.Rotate provides:

var elm = $('element');

//rotate to 180 degrees
elm.rotate(180);

//rotate from 180 to 50
elm.rotate(180,50);

//rotate from where it currently is back to -20
elm.rotate(-20);

//rotate clockwise BY 20 degrees
elm.rotate('+20');

//rotate counter clockwise by 100 degrees
elm.rotate('-100');

//bring it back to 0
elm.normalize();

//do something crazy
var rotator = new Fx.Rotate(elm,{
    transition : 'circ:in',
    link : 'cancel'
});
rotator.start(200).chain(function() {
    rotator.start('-100').chain(function() {
        rotator.normalize();
    });
});

Full Documentation, Demos & Download

Click here to view the documentation for the new Fx.Rotate plugin

No Comments »