3D Interactive Hover Effect With jQuery And CSS3 - Plate

File Size: 6.91 KB
Views Total: 7926
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


3. Customize the hover effect with the following options.


  // 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.