<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--
第一步：設置div旋轉對象和input滑塊的基本屬性值
第二步：給input滑塊添加一個onchange事件，獲取滑塊停止時的屬性值
第三步：將獲取的input滑塊屬性值設置為div的旋轉屬性，附帶顯示當前旋轉值
-->
<div id="div1">
transfrom rotate
</div>
<div>
<input type="range" min="-360" max="360" value="20" onchange="rotate(this.value)" /> <br />
transform:rotate(<span id="span1">20</span>deg);
</div>
<style>
#div1 {
width:100px;
height:70px;
background-color:red;
margin:50px 0;
transform:rotate(20deg);
-ms-transform:rotate(7deg); /* Firefox */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Safari and Chrome */
}
</style>
<script>
function rotate(value) {
var obj1 = document.getElementById("div1");
obj1.style.transform = "rotate(" + value + "deg)";
obj1.style.webkitTransform = "rotate(" + value + "deg)";
obj1.style.msTransform = "rotate(" + value + "deg)";
obj1.style.MozTransform = "rotate(" + value + "deg)";
obj1.style.OTransform = "rotate(" + value + "deg)";
var obj2 = document.getElementById("span1");
obj2.innerHTML = value;
}
</script>
</body>
</html>
