Features

• zero dependencies
• less than 15k
• optional jQuery support
• works on iOS
• built in touch handlers with callbacks

Usage

oriDomi works with or without a DOM library like jQuery.

First, initialize your target element with oriDomi using either jQuery:

var $domi = $('.my-div').oriDomi();

or using the standard DOM API:

var domi = new OriDomi(document.getElementsByClassName('my-div')[0]);

You can pass a number of options when initializing oriDomi on an element.

Options can include the number of horizontal and vertical panels, speed, perspective distance, shading method, as well as a few others.

For example:

var $domi = $('.my-div').oriDomi({ vPanels: 3, hPanels: 10,
    perspective: 200, speed: 500, shading: false });

Once oriDomi is initialized on an element, you can call methods like so:

$domi.oriDomi('accordion', -30, 'right');

The first argument is the method to be called, the second is the angle to rotate by, and the third, optional argument is the anchor from which to transform (left, right, top, bottom).
Left is default.

Alernatively, you can use this syntax style when using jQuery:

$domi.oriDomi().foldUp();

You can also pass an options object literal as another argument, which can include a callback function to run when the animation completes.

Methods include accordion, reveal, curl, collapse, ramp, foldUp, unfold and reset.

Keep in mind, you can pass shorthand anchor names such as 'l', 'r', 't', 'b' or 1, 2, 3, 4.

$domi.oriDomi('reveal', 44, 1,
    { callback: function(){ alert('oriDomi reveal finished!') } });

For a detailed look, read through the annotated source.

Caveats

• oriDomi only works in modern browsers that support CSS 3D transforms
  If a browser doesn’t support oriDomi, the DOM won’t be touched.
• oriDomi works best in WebKit browsers.
  Firefox is supported, but antialiasing doesn’t work well yet. You can force antialiasing in Firefox with the forceAntialiasing: true option.
• If you’re targeting an element that has dimensions defined by media it contains (e.g. an image), be sure to wait until the image is loaded before invoking oriDomi.
  oriDomi works best when you define a width and height on the target element.

Final Thoughts

oriDomi is new, so it likely has some bugs.

If you have an idea or a bugfix, please contribute to the Github repo.

If you enjoy oriDomi, check out my iPhone app ChainCal.

Or, follow me on twitter.

The DOM is your oyster.

Free jQuery Plugins, HTML5 and CSS3 Scripts - Providing tons of Jquery Plugins,Html5 and CSS3 Scripts for web developers to preview and download. By using these resources, you can create amazing effects with fancy animations of content elements like text, images and so on.