如何使一张网页呈现三维立体感

要用js实现就比如一个div，让他相当于能够在网页中翻转，，感觉上就行

解决方案 »

  1.   

    是给网页右边框与下边框加上 css样式 呈现稍微的立体感?
      

  2.   

    你是说类似于那种记分牌的翻动效果么？思路：
    把一个DIV的高慢慢变成0，
    在高度减少的同时，还要增加这个DIV的top值，
    然后，又慢慢变回原样式，
    在变回原样的同时，还要慢慢减少DIV的top值而且，还要控制这个节奏，
    不能是匀速的，总之有点复杂
      

  3.   

    据说html5 元素有翻转的，，用在div上行不？
      

  4.   

    <!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>凑合用吧 移动范围过大时变化太大了 没处理..