Tuesday, 26 January 2016

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

No comments:

Post a Comment

Hit me with a comment!