Minimalist jQuery & CSS3 Rotation Animation Plugin - Rotate.js

File Size: 8.77 KB
Views Total: 1980
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimalist jQuery & CSS3 Rotation Animation Plugin - Rotate.js

Rotate.js is an extremely lightweight jQuery plugin that makes use of CSS3 transforms to rotate any element by a specific number of degrees.

How to use it:

1. Link to jQuery library and the jQuery rotate.js plugin like this:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/js/rotate.js"></script>

2. Load the jQuery easing plugin for more easing effects.

<script src="jquery.easing.js"></script>

3. The JavaScript to rotate an element 360 degrees.

$("#element").rotate(360);

4. Change the default rotation speed.

$("#element").rotate(360, {
  duration: 2000
});

5. Apply a custom easing effect.

$("#element").rotate(90, {
  easing: 'easeOutBounce'
});

6. Execute a callback function when the rotation animation is completed.

$("#element").rotate(360, {
  complete: function () { 
    // do something
  }
});

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