Advertise with us

How to dynamicaly rotate html element using css or jquery

Hi Everyone!

How to dynamicaly rotate html element using css or jquery?

Please help me!

Thanks in advance!
Last updated:4/16/2013 8:40:49 AM

1 Answers

Vijay Shukla
Vijay Shukla

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