How to dynamicaly rotate html element using css or jquery

Question

Vijay Shukla · Answer

Hi John!You can try as belowHTML Code:&lt;body&gt; &lt;table cellpadding="15" cellspacing="15"&gt; &lt;tr&gt; &lt;td&gt; &lt;img src="http://www.mindstick.com/Employeesection/Image/Multi_purpose.png" id="imgTag" height="150px" width="150px" border="1" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;br/&gt; Rotate: &lt;input type="range" min="-360" max="360" value="0" onchange="rotator(this.value)" /&gt;&lt;br /&gt; Rotate image in &lt;span id="span1"&gt;Zero deg&lt;/span&gt;&lt;/body&gt;JavaScript Code:&lt;script type="text/javascript"&gt; 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"; } &lt;/script&gt;

forum

How to dynamicaly rotate html element using css or jquery

Can you answer this question?

1 Answers