Cross-browser jQuery Image Rotation Plugin - jqueryRotate
File Size: | 43.6 KB |
---|---|
Views Total: | 2077 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
jqueryRotate is a lightweight, cross-browser jQuery plugin used to rotate an image to any angle using CSS3 transforms. With fallsbacks to CANVAS and/or VML (IE6) for old browsers which don't support CSS3 transform property.
How to use it:
1. Place the script jQueryRotate.js
after jQuery library and the jqueryRotate is ready for use.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jQueryRotate.js"></script>
2. The JavaScript to rotate your image by a given angle.
$("img").rotate(180);
3. Add an animation to the image while rotating.
$("img").rotate({ angle: 0, animateTo:180 });
4. Config the duration of the rotate animation.
$("img").rotate({ angle: 0, animateTo:180, duration:6000 });
5. Easing function is supported as well.
$("img").rotate({ angle: 0, animateTo:180, easing: function(){} });
6. Execute a callback function when the animation is completely finished.
$("img").rotate({ angle: 0, animateTo:180, callback: function(){} });
7. Get the current angle of rotated image.
$("img").rotate({ angle: 0, animateTo:180, callback: function(){ alert($(this).getRotateAngle()); } });
8. Stop the rotate animation manually.
$("img").stopRotate();
This awesome jQuery plugin is developed by wilq32. For more Advanced Usages, please check the demo page or visit the official website.