Skip to content

Instantly share code, notes, and snippets.

@dhananjay431

dhananjay431/index.html

Created December 24, 2024 13:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dhananjay431/9de58b9009a79a44c85535fa7426b4d0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dhananjay431/9de58b9009a79a44c85535fa7426b4d0 to your computer and use it in GitHub Desktop.
Download ZIP
Rotate DIV using a range slider
Raw
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>);
Raw
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";
}
Raw
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment