首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

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

2012-04-03 
如何使一张网页呈现三维立体感要用js实现就比如一个div,让他相当于能够在网页中翻转,,感觉上就行[解决办法

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

热点排行