Rotate DIV using a range slider

index.html

<p>Rotate the yellow div element:</p>

<div id="div1">HELLO</div>

Rotate: <br>
<input type="range" min="-360" max="360" value="7" oninput="rotate(this.value)" onchange="rotate(this.value)" /><br>
transform: rotate(<span id="span1">7deg</span>);

rotate-div-using-a-range-slider.markdown

Rotate DIV using a range slider

A Pen by Adrian Parr on CodePen.

License.

script.js

function rotate(value) {
  document.getElementById('div1').style.webkitTransform="rotate(" + value + "deg)";
  document.getElementById('div1').style.msTransform="rotate(" + value + "deg)";
  document.getElementById('div1').style.MozTransform="rotate(" + value + "deg)";
  document.getElementById('div1').style.OTransform="rotate(" + value + "deg)";
  document.getElementById('div1').style.transform="rotate(" + value + "deg)";
  document.getElementById('span1').innerHTML=value + "deg";
}

style.css

#div1 {
  width:120px;
  height:100px;
  background-color:yellow;
  border:1px solid black;
  transform:rotate(7deg);
  -ms-transform:rotate(7deg);
  -webkit-transform:rotate(7deg);
}