问答详情
源自:2-3 translate属性

只能在代码内部改角度,不能滑竿控制

<!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>


提问者:qq_说不定永远很容易_0 2015-11-23 13:06

个回答

  • echo_kinchao
    2015-11-23 16:26:23

    CSS3本来就是样式控制啊