HOW TO DYNAMICALY ROTATE HTML ELEMENT USING CSS OR JQUERY

john rob

Total Post:108

Points:756
Posted by  john rob
 1018  View(s)
Ratings:
Rate this:
Hi Everyone!

How to dynamicaly rotate html element using css or jquery?

Please help me!

Thanks in advance!
  1. Vijay Shukla

    Post:100

    Points:700
    Re: How to dynamicaly rotate html element using css or jquery

    Hi John!

    You can try as below

    HTML Code:

    <body>
        <table cellpadding="15" cellspacing="15">
            <tr>
                <td>
                    <img src="http://www.mindstick.com/Employeesection/Image/Multi_purpose.png" id="imgTag"
                        height="150px" width="150px" border="1" />
                </td>
            </tr>
        </table>
        <br/>
         Rotate:
        <input type="range" min="-360" max="360" value="0" onchange="rotator(this.value)" /><br />
        Rotate image in <span id="span1">Zero deg</span>
    </body>

    JavaScript Code:
    <script type="text/javascript">
            function rotator(value) {
                document.getElementById('imgTag').style.webkitTransform = "rotate(" + value + "deg)";
                document.getElementById('imgTag').style.msTransform = "rotate(" + value + "deg)";
                document.getElementById('imgTag').style.MozTransform = "rotate(" + value + "deg)";
                document.getElementById('imgTag').style.OTransform = "rotate(" + value + "deg)";
                document.getElementById('imgTag').style.transform = "rotate(" + value + "deg)";
                document.getElementById('span1').innerHTML = value + " deg";
            }
        </script>

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!