Minimalist jQuery & CSS3 Rotation Animation Plugin - Rotate.js
File Size: | 8.77 KB |
---|---|
Views Total: | 2000 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.