找不着完整的代码，自己写了点，实现不了滑块使得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>
1 回答
找谁
TA贡献1条经验 获得超0个赞
我把你的代码运行在页面上 ，发现了很多错误。因为我是JS初学者，所以不能帮助你什么，只能告诉你，onchange="translate()" 根本进不去function translate()，改变onchange方法，用onpropertychange、oninput 方法也是一样，oninput 报错：new_file1.html:61 Uncaught TypeError: translate is not a function。其它的没有反应。
- 1 回答
- 0 关注
- 1287 浏览
添加回答
举报
0/150
提交
取消