找不著完整的代碼，自己寫了點，實現不了滑塊使得DIV塊平移的效果<!DOCTYPE html><html><head> <title>創建3D場景</title> <style type="text/css">? ? #wrap{? ? -webkit-perspective:800px;/*表示3維物體距離瀏覽器窗口800像素處*/? ? -webkit-perspective-origin:50% 50%;/*表示位于瀏覽器正中心處觀察3維物體*/? ? ? ? -webkit-transform-style:-webkit-perspective-3d;? ? }? ? #block{? ? width: 100px;? ? height: 100px;? ? margin: 0px auto;? ? background: yellow;? ? /*-webkit-transform:translateX(x 500px);/*沿X軸位移500PX*/? ? /*-webkit-transform:rotateX(45deg); /*繞X軸旋轉45度*/? ? }? ? #op.range-control{? ? width: 721px;? ? } </style> <script type="text/javascript"> function translate() { var x=document.getElementById("translatex").value; var y=document.getElementById("translatey").value; var z=document.getElementById("translatez").value; document.getElementById("block").style.webkitTransform="translateX("x"+px) translateY("y"+px) translateZ("z"+px)"; document.getElementById("translatex-span").innerText=x; document.getElementById("translatey-span").innerText=y; document.getElementById("translatez-span").innerText=z; } </script></head><body><div id="wrap"> <div id="block"> </div> <div id="op">? ? ? ?<p>translatex:<span id="translatex-span">0</span>px</p>? ? ? ?<input type="range" min="-360" max="360" id="translatex" value="0" class="range-control" onchange="translate()"/><br>? ? ? ?<p>translatey:<span id="translatey-span">0</span>px</p>? ? ? ?<input type="range" min="-360" max="360" id="translatey" value="0" class="range-control" onchange="translate()"/><br>? ? ? ?<p>translatez:<span id="translatez-span">0</span>px</p>? ? ? ?<input type="range" min="-360" max="360" id="translatez" value="0" class="range-control" onchange="translate()"/><br> </div></div></body></html>
我想學習滑塊控制div
qq_風雨中堅強_0
2016-04-17 12:54:29
