Create Custom Rotate Animations with jQuery and CSS3

File Size: 4.98 KB
Views Total: 4760
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Create Custom Rotate Animations with jQuery and CSS3

A super tiny JavaScript library which gives you the ability to apply a custom rotate animation on an Html element using jQuery and CSS3 2D transforms.

How to use it:

1. Add the latest version of jQuery library and the jQuery rotate plugin into your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="src/jquery.rotate.js"></script>

2. Call the plugin on an Html element where you wish to perform a rotate animation on page load.

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

3. Customize the rotate animation by passing the options during initialization.

$("#rotate").rotate({
 
// animation speed
speed: 5000,

// how many degrees you want to rotate
degrees: 360,

});

4. Execute a function once the rotate animation is complete.

$("#rotate").rotate({
// OPTIONS
}, function(){
  // DO SOMETHING
});

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