Creating 3D rotatable objects with jQuery Interactive 3D plugin

A tiny and touch-enabled jQuery Interactive 3D plugin, which allows us to create a 3D interactive & rotatable objects in easy way.

Going 3D with jQuery Interactive 3D plugin

Create a 3D interactive object using images and one simple JS call! Compatible with modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones.

jQuery Interactive 3D plugin - rotate images
jQuery Interactive 3D plugin – rotate images

jQuery Interactive 3D let us to create a 3D interactive object, using several images as frames allowing the user to drag around and manipulate the image. This plugin is perfect for showcasing your product on the web and similar purposes.

Usage

To add this to your website, simply include the latest jQuery library together with jquery.interactive_3d.js. Then create a markup and call the function as follows:

  ...
  <div id="interactive_3d">
    <img src="images/frame_1.png">
  </div>
  ...

Note:

Please make sure that the images that will be used as frames have a file name that ends with _frame-number. For example, first frame named foobar_1.jpg, the second foobar_2.jpg, etc.

$("#interactive_3d").interactive_3d({
  // options ...
});

With one JS call, you will now have an awesome 3D interactive images on your website.

Demo:

http://www.thepetedesign.com/demos/interactive_3d.html

Get jQuery Interactive 3D from GitHub:

https://github.com/peachananr/interactive_3d

And here is a related tutorial, that explains some details of that solution.

You may also like:

HexaFlip – a flexible 3D cube in JavaScript

3 x Enjoy!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1