jQuery Plugin: rotate3Di - Flip HTML content in 3D

Rotate3Di is a jQuery Effect Plugin that makes it possible to do an isometric 3D flip or 3D rotation of any HTML content. It also enables custom 3D rotation animations. CSS3 Transforms are used to create this visual "3D" isometric effect. Supported browsers are Safari, Chrome, Webkit, Firefox 3.5+, IE9+, and Opera 11+. The plugin's functionality includes: setting or animating HTML content to an arbitrary isometric rotation angle, as well as flipping, unflipping, or toggling the flip state of an object.

Send Me Some Beer Money (Support Rotate3Di)

Use the PayPal donate button to buy me a beer! Your donation will help me:

test and support more browser versions

add features and fix bugs

answer all of your emails

Thanks for making Rotate3Di a popular free jQuery plugin. I am self employed, so I have to balance doing work that pays the bills with working on things (like this) that are fun, but don't keep the lights on. Send me some beer money using the PayPal donate button, so that I can happily put some more time into this project.

Documentation

The Method: rotate3Di(degrees, [duration], [options])

Arguments:

degrees

Number, String

The number of degrees to rotate about the isometric Y axis. This may be positive, negative, or it may be a relative value as described for the jQuery animate effect (e.g. 180, -360, '+=270'). Or, the strings 'flip', 'unflip', or 'toggle'.

duration

Number, String

(Optional)

A string representing one of the three predefined speeds ('slow', 'normal', or 'fast') or the number of milliseconds to run the animation (e.g. 1000). This is the same as the duration argument for the jQuery animate effect, including the behavior if you specify a value of 0.

Options:

direction

String

Default:'anticlockwise'

Specify the spin direction as 'clockwise' or 'anticlockwise' / 'counterclockwise' when the degrees argument is set to the string values 'flip', 'unflip', or 'toggle'. When the argument degrees is set to a numerical value, the spin direction is controlled by the value's sign (e.g. positive numbers spin clockwise).

sideChange

function ([front])

A callback function to be executed whenever the object being rotated flips sides. This callback can take one argument, which will be set to true if the side being revealed is the front side of the object. In the scope of the callback, this is the object being rotated. If you rotate an object with rotate3Di and specify a sideChange callback function, the flip side of the object will not show up mirrored / reversed.

complete

function ()

A callback function to be executed whenever the animation completes, executes once for each element animated against. This is the same as the complete callback for the jQuery animate effect.

easing

String

Default:'swing'

The name of the easing effect that you want to use (plugin required). There are two built-in values, 'linear' and 'swing'. This is the same as the easing option for the jQuery animate effect.

Usage

Statically Setting a Rotation Angle

Rotate3Di can be used to statically set the isometric rotation angle of an object.

STATIC#ex1

Code:

$('#ex1').rotate3Di(30);

Animating to a Rotation Angle

Rotate3Di can animate an object to any angle of rotation about the isometric Y axis. Click the image to see the rotation animated. Note that once the animation has finished, the object will be at a 180 degree angle to the Y axis already, thus repeat clicks will have no effect.

CLICKME #ex2

Code:

$('#ex2').click(function () {$(this).rotate3Di(180, 1000);});

Animating Relative Degrees of Rotation

Rotate3Di can animate the rotation of an object through any number of degrees of rotation about the isometric Y axis. Click the image to see the animated rotation, this time by -180 degrees (thus, counterclockwise rotation). Click the image additional times to rotate by the same amount again and again.

CLICKME #ex3

Code:

$('#ex3').click(function () {$(this).rotate3Di('-=180', 1000);});

Flip, Unflip, and Toggle Shortcuts

With rotate3Di, it is possible to flip, unflip, or toggle the flip state of an object without specifying numerical degree values.

HOVERME #ex4

CLICKME #ex5

CLICKME #ex6 CW

Code:

// Two things to note here:
// 1. We use .stop() to prevent the "buildup" of animations
// 2. We capture the hover event on a different element than the one we
// rotate so that the hover-out isn't triggered if the rotation of the
// element moves it out from under the user's mouse pointer.
$('#ex4').hover(
function () {$(this).find('p').stop().rotate3Di('flip', 500);},
function () {$(this).find('p').stop().rotate3Di('unflip', 500);}
);
$('#ex5').click(function () {$(this).rotate3Di('toggle', 1000);});
$('#ex6').click(function () {
$(this).rotate3Di('toggle', 1000, {direction: 'clockwise'});
});

Using Callback Functions for Side Change and Animation Completion

Using the callback function options available with rotate3Di, you can take action as your object reveals its front and back sides during rotation, as well as take action when your animation has completed. Click this example to animate it.