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.

<TITLE>Rotate image using jquery</TITLE>
<div style="width:50%; margin:0 auto; text-align:center">
 <img src="img/chrome.png" class="img1">
 <img src="img/internet-explorer.png" class="img1">
 <img src="img/safari.png" class="img1">

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.

<script src="jquery.min.js"></script>
<script src="jQueryRotate.js"></script>

Apply rotate action on images.

$(function() { 
 var rotation = function (){
      callback: rotation

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

 <button id="start">Start Rotation</button> 
 <button id="stop">Stop Rotation</button>
$(function() { 
var ang = 0;
 $("#start").click(function() { = setInterval(function(){
 $("#stop").click(function() {  



You can apply more rotation action as per your requirement just go through jQuery Rotation official document

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