Rotate images using jquery

In this tutorial i am going to show you how to rotate image using jquery, There is a plug-in called jQueryRotate is available on web to apply rotate animation on image in very minimal code.

So Here i am going to use this jquery based plug-in and will show you some image rotation examples.





First of all create your html file and call some sample images.

Example-1
 
 
 

After that add jquery core and jQuery Rotate library on your html page.
Note: jQuery Rotate library is dependent on jquery core library so don’t forget to add core library before jQuery rotate library.

Apply rotate action on images.

$(function() { 
 var rotation = function (){
   $(".img1").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation
   });
  }
}

Apply rotate action on button click, Means control image rotation using start and stop button.

 Start Rotation 
 Stop Rotation

$(function() { 
var ang = 0;
 $("#start").click(function() {  

   window.st = setInterval(function(){
	    ang+=4;
	  $(".img1").rotate(ang);
	  },10);
 });

 $("#stop").click(function() {  
   clearInterval(window.st);
 });
}

You can apply more rotation action as per your requirement just go through jQuery Rotation official document http://jqueryrotate.com/

If you like this post please don’t forget to subscribe my public notebook for more useful stuff