怎么使一张网页呈现三维立体感

如何使一张网页呈现三维立体感
要用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>

怎么使一张网页呈现三维立体感

相关推荐