Rotate image to different degrees using Jquery

Using jquery to rotate any image of your choice, use css to add more effects, the code below will give you perfect work through, please male sure you should include the latest jquery file on your page.
this code can help you to rotate the image to any degree like 180, 90, -90, 60, 30 and etc

Add jquery Library file

   <script src="http://code.jquery.com/jquery-2.1.1.js"></script>

Javasrcipt code

<script>
function rotateImage(degree) {
    $('#rotateImg').animate({  transform: degree }, {
    step: function(now,fx) {
        $(this).css({
            '-webkit-transform':'rotate('+now+'deg)', 
            '-moz-transform':'rotate('+now+'deg)',
            'transform':'rotate('+now+'deg)'
        });
    }
    });
}
</script>

HTML Code

<div style="margin-top:30px" align="center">
        
        <input type="image" src="rotate-right.jpg" width="4%" value="90" onClick="rotateImage(this.value);" style="position: absolute;margin-top: 250px;">
 
            <img src="marshall.jpg" style="border-radius:200px;" id="rotateImg" width="20%" />
        


        <input type="image" src="rotate-left.png" width="4%" value="-90" onClick="rotateImage(this.value);" style="position: absolute;margin-top: 250px;">
    
    </div>

    <p align="center"><input type="image" src="res.png" width="4%" value="0" onClick="rotateImage(this.value);" style="position: absolute;margin-center: 90px;"></p>

Regards
Prem Tiwari
For Creative Idea

• Tweet
• Share
• Share
• Share