adsense

Friday, January 20, 2017

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

No comments:

Post a Comment