Fx.Rotate

An optimized rotation plugin for MooTools 1.3

Rotation is something that is tricky to perform with JavaScript and CSS. Modern browsers do support CSS3 tranforms, but older browsers (I’m looking at you IE) do not support them at all. This includes Internet Explorer 6, 7 and 8 … luckily IE9 supports them. In addition, to access the transform property with JavaScript and CSS you will need to code all of the browser vendor prefixes to access them. This gets to be pretty tedious and annoying.

Despite their being a variety of rotation solutions via JavaScript … and in MooTools … this plugin 10000% completes the task of rotation and properly handles default CSS values, normalization and event handling.

Last Updated

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

About
Requirements
Supported Browsers
Simple Usage
Advanced Usage
Other Nice Features
Methods
Options & Events
Issues
Demos
Download
Contact

Bug Fixes

Fx.Rotate was recently fixed and some of properties have changed.

- Element.normalize() was changed to Element.normalizeDegree() due to a conflict with a firefox-specific reserved DOM method.
- Some variable name bug fixes were also fixed.

About

MooTools Fx.Rotate adds support for element rotation for all browsers easily. It uses the CSS3 transforms properties for Chrome, Opera, Safari, Firefox, IE9 and IE10 while using the matrix rotation filter for IE6, IE7 and IE8. The rotation function itself within the code is optimized so that it performs the browser checking only once and then applies the correct CSS setter to perform the styling.

To Top Goto Demos Goto Download

Requirements

MooTools Core 1.3 (MooTools 1.2 is not supported).

To Top Goto Demos Goto Download

Supported Browsers

All IE browsers and browsers that support CSS3 transforms. This includes browsers: Chrome 9+, Firefox 3.5+, Safari 3+, Opera 10.5+ and IE9+. IE6, IE7 and IE8 are browsers that only support rotation via the IE proprietary Internet Explorer filter CSS properties.

To Top Goto Demos Goto Download

Simple Usage

Fx.Rotate can be used in two ways: directly with a new Fx.Rotate constructor on by a given element rotate() method.

<div class="r">Rotate this!</div>
...
<script type="text/javascript" src="./mootools-core-1.3.js"></script>
<script type="text/javascript" src="./Fx.Rotate.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
    $('r').rotate(180);
});
</script>

To Top Goto Demos Goto Download

Advanced Usage

Fx.Rotate can be used as a constructor (just like the Fx.Morph and Fx.Tween classes which are found in the MooTools Core). Here is an example of its usage:

<div class="r">Rotate this!</div>
...
<script type="text/javascript" src="./mootools-core-1.3.js"></script>
<script type="text/javascript" src="./Fx.Rotate.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {

    var rotator = new Fx.Rotate('r',{
        transition:'circ:in',
        duration:'long'
    });

    // this will create a looping animation that routates 180 degrees clockwise
    // and then counter clockwise back to 0 degrees
    var counter = 1;
    var fn = (function() {
        var polarity = counter++ % 2 == 0 ? '+' : '-';
        rotator.rotate(polarity+'180').chain(fn);
    });

    fn();
});
</script>

To Top Goto Demos Goto Download

Other Nice Features

Fx.Rotate is very clever because it has a lot of added functionality. This includes:

Feature	Description
Default CSS Value Detection	Once started, Fx.Rotate will check to see if the given element already contains any CSS values for the rotation property. This includes both properties with the vendor prefix and ones without it (so just a direct transform:value attribute/value pair in CSS). The properties themselves can be either transform:rotate() or transform:matrix(). Fx.Rotate will then do all the math and figure out where to start the animation from. Fx.Rotate also supports default CSS value support for IE6, IE7 and IE8 by use of the filter (and -ms-filter for IE8). So if any default values are set for filter, via a CSS stylesheet, then they will be picked up by Fx.Rotate and utilized. Both the IE filter matrix and filter BasicImage.Rotation detection are supported.
Relative rotation	The rotate function, for both element.rotate() and new Fx.Rotate(element).rotate(), supports a sign-prefix value which identifies to start the rotation forward (clockwise) or reverse (counterclockwise) from where it currently is. The current value itself can be the rotation value set from a previous rotation or from a default CSS assigned value. So element.rotate(‘+30′); element.rotate(‘+30′); element.rotate(‘+30′); will result in a final clockwise rotation to equal 90 degrees.
Degree Normalization	If enabled (by default it is) then after a rotation operation has completed, the final rotation property will be normalized to fall into the range of 0 <= rotation < 360. So if you rotated to 720 degrees then it will rotate twice and then once its over the final rotation degree will be set to 0 degrees (720 % 360 = 0). Negative-degree rotations will be rotated to positive degrees (so -10 % 360 = 350).
Rotation Normalization	At any time, ~~element.normalize()~~ element.normalizeRotation() or new Fx.Rotate(element).normalize() can be called which will rotate the element back to 0 degrees from where it currently is. If an element is above its halfway rotation point (180 degrees) then it will rotate clockwise back to 0 degrees (or 360 in this case) and if its below 180 degrees then it will rotate counterclockwise back to 0 degrees.
Built atop the Fx base class	Fx.Rotate is built as a subclass of the Fx base class which is in the MooTools Core. This adds support for a multitude of properties and events that the abstract Fx class has to offer.

To Top Goto Demos Goto Download

Issues

Despite the plugin being fully supported by all browsers, there are a few issues that cannot be avoided.

The transform-origin property, which allows to designate from what reference point the element will rotate (left, right, center, top, bottom) does not work with the IE filter rotation CSS property. The default rotation property for the older IE browsers which use the filter property is left top. This feature is not working in Fx.Rotate and cannot be fixed.
IE10 isn’t working as of yet, but the browser itself is, as of this date, in developer platform preview 2. This will not be an issue once its complete, since the earlier version of IE, IE9, does, however, fully support CSS3 transforms. Once it gains more momentum towards a stable release, I’ll patch it up if its still not working.
Older, non-IE, browsers that are dependent on the css3 transform method like Safari, Chrome, Firefox and Opera that DO NOT support CSS3 transforms will have no method of finding out if it works or not. This shouldn’t be a problem since almost all of the non-IE browsers support it up to three versions back..
The rotation animation itself may be too heavy to draw on a browser that doesn’t support CSS hardware acceleration. This issue can, however, be controlled by setting a lower FPS rate in the FX class options paramater during object instatiation. The only problem is that lowering the FPS is an all or nothing solution since hardware acceleration support cannot be detected via JavaScript.

To Top Goto Demos Goto Download

Methods

The following methods are available with an instance of the Fx.Rotate class:

Method	Description
element.rotate(degree)	Rotates (animates) the element to the given degree. If the degree is prefixed with a + or – then it will rotate the element relatively from where it currently is. If the degree is above 360 then it will rotate the element to that given degree and afterwards will normalize the degree if the normalizeDegreeAfterComplete option is set.
element.normalizeRotation() or instance.normalize()	Rotates (animates) the element to the degree of zero from where it currently is. If the element’s current rotation is at zero then nothing happens.
instance.normalizeDegree()	Normalizes the current degree if it is above 359 to fit into the range between 0 <= rotation <= 359 degrees using modular arithmetic.
instance.getCurrentRotation()	Returns the current rotation degree as an integer. If the normalizeDegreeAfterComplete option is set then the degree itself will be between 0 and 359 degrees.
instance.set(rotation)	Sets (without animation) the rotation of the element. This method is continuously called with the Fx operation which is called when the start method is executed.
instance.start(to)	Rotates (animates) the degree from the current rotation (or zero) to the rotation provided in the parameters.
instance.start(from,to)	Rotates (animates) the degree from the provided from rotation to the to rotation provided in the parameters. Prefixed plus and minus characters can be used for relative rotation.
instance.start()	Exact same behaviour as instance.normalize()
instance.cancel()	Fx base class method for cancelling the rotation animation.
instance.pause()	Fx base class method for pausing the rotation animation.
instance.resume()	Fx base class method for resuming the rotation animation after it has been paused.
element.get(‘Fx.Rotate’);	Returns (and creates if not present) the instance of the Fx.Rotate class for the given element.
element.set(‘Fx.Rotate’,options);	Sets and returns (and creates if not present) the options for the instance of the Fx.Rotate class for the given element.

Options and Events

The following options and events are available with an instance of the Fx.Rotate class:

* All of events of the Fx base class and …

Option	Values	Description
ieFps	Integer (default = null)	The FPS value that is used for when a browser is performing rotation using the IE filter method. If nothing is provided then it will use the same FPS value that is set in the options.
origin	String (default = ‘center center’)	The transform-origin property that will be assigned to the element prior to rotation. This only applies to browsers that use the CSS3 transform method and not the IE filter-based rotation browsers (IE6, IE7 and IE8).
normalizeDegreeAfterComplete	Boolean (default = true)	This option will flag Fx.Rotate to normalize the degree of the final rotation value after the rotation animation operation is over if the rotation value itself is larger than 359 or less than 0. This value should be set to true, but it can be set to false if the normalization itself would be required to rotate the for values higher than 360 degrees.
* Events & Other Options	All of the other events and functions can be found at the MooTools 1.3 documentation page for the Fx base class.