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
   
Cross-browser jQuery Image Rotation Plugin - jqueryRotate

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.