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

function rotateImage(degree) {
    $('#rotateImg').animate({  transform: degree }, {
    step: function(now,fx) {


<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;">

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

Prem Tiwari
For Creative Idea

No comments:

Post a Comment

Hit me with a comment!