只能在代码内部改角度，不能滑竿控制
qq_说不定永远很容易_0
2015-11-23 13:06
<!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>
1回答
-
- echo_kinchao
- 2015-11-23 16:26:23
CSS3本来就是样式控制啊
CSS3 3D 特效
78574 学习 · 425 问题
相似问题