Home > DeveloperSection > Forums > How to dynamicaly rotate html element using css or jquery
john rob

Total Post:108

Points:756
Posted on    April-16-2013 3:08 AM

 MSSQL Server MSSQL Server 
Ratings:


 1 Reply(s)
 722  View(s)
Rate this:
Hi Everyone!

How to dynamicaly rotate html element using css or jquery?

Please help me!

Thanks in advance!


Vijay Shukla

Total Post:100

Points:700
Posted on    April-16-2013 8:40 AM

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>


Don't want to miss updates? Please click the below button!

Follow MindStick