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

求代码怎么写,给我一份

这个的代码有吗?谁发一下

提问者:刘凯Zzzz 2015-08-19 20:35

个回答

  • qq_说不定永远很容易_0
    2015-11-23 16:39:55

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

        

    }

    #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("+z+"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" onmousemove="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" onmousemove="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" onmousemove="rotate()"/><br/>

    </div>

    </center>

    </body>

    </html>