3D Interactive Hover Effect With jQuery And CSS3 - Plate

Plate.js is a simple, lightweight jQuery plugin that applies a configurable interactive 3D hover effect to DOM elements using CSS3 2D/3D transforms.

How to use it:

1. Load the latest jQuery library (slim build is recommended) and the Plate.js script in the html document.

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="jquery.plate.js"></script>

2. Just call the plugin's main function on the target element and done.

$('#element').plate();

3. Customize the hover effect with the following options.

$('#element').plate({

  // inverse animation
  inverse: false,

  // transformation perspective in pixels
  perspective: 500,

  // maximum rotation in degrees
  maxRotation: 10,

  // duration in milliseconds
  animationDuration: 200
  
});

---

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