如何使一张网页呈现三维立体感
要用js实现
就比如一个div，让他相当于能够在网页中翻转，，感觉上就行
[解决办法]
- JScript code
<!DOCTYPE html><html> <style type="text/css"> body{width:1000px;height:1000px;} div{border:1px solid #F00; width:200px;height:100px; background-color:#F00; margin:200px auto;} .a{ transform:skew(-30deg,0deg); -webkit-transform:skew(-30deg,0deg); } </style> <title>123</title><head><body> <div class="a" id="test">test</div></body></head> <script> (function(getFocus){ var drag=false; var cache={clickX:0,clickY:0}; var el=document.getElementById("test"); window.onmousedown = function(e){ drag=true; var mPos = getFocus(e); cache.clickX=mPos.x; cache.clickY=mPos.y; } window.onmouseup=function(){ drag=false; } window.onmousemove = function(e){ e.returnValue=false; if (drag) { try { var mPos = getFocus(e); var time=0.1; var newX=(mPos.x-cache.clickX)*time; var newY=(mPos.y-cache.clickY)*time; console.log(el.style); el.style.cssText="-webkit-transform:skew("+newX+"deg,"+newY+"deg)"; }catch(e){ console.log(e); } } } })(function(e){ var e=e||window.event; var result={}; result.x=e.clientX; result.y=e.clientY; result.cx=e.offsetX; result.cy=e.offsetY; return result;}) </script></html>