Rotate Image OnClick

An image can be easily rotated using JavaScript or jQuery. I ll share both ways in this post.

HTML

 <img src="Pic.jpg" id="image" onclick="rotate90(this)"> 

JavaScript

 <script>
    var angle=90;

 
    function rotate90(ele){

     if(angle>360)//reset angle
                angle=90;

 
     ele.style.webkitTransform="rotate("+angle+"deg)";//Mozilla

     ele.style.msTransform ="rotate("+delta+"deg)"; //IE

     /*optionally set other vendor specific transformation

       ele.style.MozTransform = rotate("+delta+"deg)";
       ele.style.OTransform = rotate("+delta+"deg)";

    */

 
        angle+=90;
    }
 </script>

jQuery

 Use jQuery Rotate plugin to do the actual rotation 

 <script>
    var angle=90;

 
    function rotate90(ele){

       if(angle>360)//reset angle
                angle=90;

 
       $(this).rotate(angle);

 
        angle+=90;
    }
 </script>

Cheers
Samitha