Ever imagined if you could create awesome 3D Effect with the write less do more code? Then these wonderful collection of jQuery 3D Effect Tutorials and examples will show off the power of jQuery in generating awesome 3D Effects.

1. 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. CSS Transforms are used to create this visual "3D" isometric effect. Supported browsers are WebKit, Safari, Chrome, and Firefox 3.5. 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.

2. 3d Universe with jQuery

Will Jessup has just release a great demo of what’s possible with jQuery (and Javascript in general): A 3d model of the universe. Try moving your mouse vertically around the screen to see the universe at different angles, horizontally to make it rotate faster. All the images are courtesy of NASA. Will used a lot of techniques to really simulate the 3d experience correctly:

* He adjusts the opacity and z-index of the images based upon the depth of the element.
* The height and width are also adjusted dynamically - but are all laid out using fontSize and EMs, allowing you to also simulate depth-of-field with text (in addition to static images or elements).
* The background moves based upon the speed, and direction, of rotation.

Also, take a look at his code for specific caching optimizations used (like saving a reference to a single jQuery object and calling it over and over, rather than re-querying on every rotation).

3. jQuery Image Cube

A jQuery plugin  that sets a division to rotate between images (or other things) as if they were on the faces of a cube. The current version is 1.2.0 and is available under the GPL and MIT licences. For more detail see the documentation reference page. Or see a minimal page that you could use as a basis for your own investigations. The image cube functionality can easily be added to a division with appropriate default settings. It then displays the images contained within the targetted division in a cycle every two seconds. A random rotation is chosen each time to move to the next image. Highlights and shadows are used to enhance the 3D effect.

4. jQuery 3D Rotator

A Wonderful 3D Roatation effect with jQuery.

5. jQuery faux-3D effect

Over the past month I've been digging deeper into jQuery. Javascript was previously uncharted waters for me, but after reading Nick La's stellar introduction to jQuery  the language didn't seem so intimidating. jQuery's main advantage as a Javascript library is how well it fits in with HTML and CSS. Looking at the code, it's all basically HTML elements and CSS attributes - very inviting. The above big is a proof-of-concept that I'm playing with for my portfolio. By layering boxes one above another, you get this simple 3D effect. I like how you don't notice it until it moves around.

6. Image Flip Using jQuery

Alright, first of all this is not a real image flip but sort of an illusion, the image does not flip itself in 3D since jQuery does not provide us with an image rotation or a distort feature for HTML elements. I know their are some image rotation plug-ins out their but they don’t work out very well with animate method of jQuery.

7. 3D Tag Cloud in jQuery

With browsers rendering JavaScript faster than ever before, it’s a great opportunity to get creative with jQuery.  This tutorial will show how to create a scrolling 3D tag cloud…it’s not as difficult as you might think.

8. Flip!0.5 - A jQuery plugin

Flip is a plugin for jquery that will flip your elements in four directions.

9. 3D Image Carousel

3D Carousel creates a mini-interactive page that can be a fun addition to a site.

---

Add this page to your favorite Social Bookmarking websites