New Project: rotate3Di jQuery Plugin
- published:
- 2009.03.11
- topics:
- css
- javascript
- tools
One of the things I've been spending quite a bit of time on lately has been my new project: rotate3Di, an effect plugin for jQuery. This plugin enables "3D" isometric perspective rotation and animation via CSS transformations. I'm happy to announce the release of version 0.9 today.
This plugin is somewhat ahead of its time. Not in the sense that I am any sort of visionary, but in the fact that I didn't wait for Firefox 3.1 to be in wide use. Because I've chosen to use native CSS transformations to produce the visual effect, you will currently only see the "3D" perspective using WebKit/Safari or Firefox 3.1 beta. (Update: Supported now in Safari, Chrome, Firefox 3.5+, IE9+, and Opera)
Firefox 3.0 and Internet Explorer are not presently supported, but it does seem within the realm of possibility using SVG and proprietary IE CSS Filters. Though, having gone down this road in IE once before, I will say the behavior is quite different due to element clipping/resizing, a different transform origin, and speed issues.
When the true full 3D perspective transformations move from iPhone Mobile Safari into the desktop WebKit/Safari, I will introduce support for those effects into this plugin as well.
Basic usage of this plugin is very similar to the jQuery animate() method and looks like this:
// Rotate #example-id 180 degrees in 1500 milliseconds.
$('#example-id').rotate3Di(180, 1500);
I actually learned a lot already from working on this project, such as what it takes to create and document a plugin for jQuery. The most interesting part for me however was how much I've learned about the jQuery internals, in particular how the animation system is built. I've created a custom step function for animating my isometric rotation function using the jQuery animation system. This is something that anybody can do, but is currently very under-documented. Using the internal jQuery animation system to create a custom animation ends up being much more robust as I don't need to reinvent the wheel in terms of animation timing or control. It works something like this, for those who are curious:
$.fx.step.customAnimationProperty = function (fx) {
// set the properties of fx.elem based on the value of fx.now
}
$('#example').animate({customAnimationProperty: value}, options);
You can always download my plugin and read the source code. I also encourage you to check out the demo on the project page. I've got a couple more interesting, more complex demos I'll be releasing in the coming weeks... probably as projects in their own right.