只能在代碼內部改角度，不能滑竿控制
<!DOCTYPE html>
<html>
<head>
<meta charset="GB18030">
<title>translate滑竿實現</title>
<style>
#experiment{
? ? ?-webkit-perspective:800;
? ? ?-webkit-perspective-origin:50% 50%;
? ? ?-webkit-transform-style:-webkit-preserve-3d;
}
#block{
? ? ?width:200px;
? ? ?height:200px;
? ? ?background-color:pink;
? ? ?margin:0 auto;
? ? ?-webkit-transition:background-color 3s;
? ??
? ? ?-webkit-transform:rotateX(140deg);
}
#block:hover{
? ? ?background-color:purple;
}
</style>
<script type="text/javascript">
? ?function rotate(){
? var x=document.getElementById("rotateX").value;
? var y=document.getElementById("rotateY").value;
? var z=document.getElementById("rotateZ").value;
? document.getElementById("block").style.webkitTransform="rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+"deg)";
??
? document.getElementById("degx-span").innerText=x;
? document.getElementById("degy-span").innerText=y;
? document.getElementById("degz-span").innerText=z;
? ?}
</script>
</head>
<body>
<div id="experiment">
? <div id="block"></div>
</div>
<center>
<div id="ksl">
? <p>rotate x:<span id="degx-span">0</span>deg</p>
? <input type="range" min="-360" max="360" id="rotateX" value="0" class="range-control" onchange="rotate()"/><br/>
? <p>rotate y:<span id="degy-span">0</span>deg</p>
? <input type="range" min="-360" max="360" id="rotateY" value="0" class="range-control" onchange="rotate()"/><br/>
? ? ? ?<p>rotate z:<span id="degz-span">0</span>deg</p>?
? ? ? ?<input type="range" min="-360" max="360" id="rotateZ" value="0" class="range-control" onchange="rotate()"/><br/>
</div>
</center>
</body>
</html>
2015-11-23
CSS3本來就是樣式控制啊