Apply 3D CSS Animations To Elements On Hover - jQuery 3dAnimate

3dAnimate is a jQuery plugin which applies awesome CSS3 animations (rotate, translate, perspective) to any element on mouse hover and move.

How to use it:

1. Include the latest version of jQuery library and jQuery 3dAnimate plugin at the bottom of the html page.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="jquery-animate3d.min.js"></script>

2. Insert a group of elements you want to animate into a DIV container like this:

<div class="animate-demo">
  <img src="1.png">
  <img src="2.svg">
  <img src="3.svg">
</div>

3. Active the default 3D hover animation on the elements you created.

$('.animate-demo').animate3d();

4. Config the plugin with the following options.

$('.animate-demo').animate3d({

  // these are default options.
  perspective: 1000,
  distance: 50,
  rotation: 0.5,
  startX: 0,
  startY: 0
  
});

Change log:

2016-06-16

• update

---

This awesome jQuery plugin is developed by putnamn21. For more Advanced Usages, please check the demo page or visit the official website.