菜鸟学堂
在线运行
源代码
<html><!DOCTYPE html> <html> <head> <style> #div1 { width:120px; height:100px; background-color:yellow; border:1px solid black; transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ } </style> <script> 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"; } </script> </head> <body> <p>Rotate the yellow div element:</p> <div id="div1">HELLO</div> Rotate: <br> <input type="range" min="-360" max="360" value="7" onchange="rotate(this.value)" /><br> transform: rotate(<span id="span1">7deg</span>); </body> </html>
运行结果
在线运行
菜鸟学堂 edu.jb51.net