<!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>
时间： 2024-10-01 18:51:29