JS 3d实现

<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script><style>
.s_c{
position:relative;
800px;
height:300px;
border:1px solid #000;
overflow:hidden;
}
</style>
<script type="text/javascript">
      var Sl=Sl||{};
      (function(){
       var undefined;
       function box(o){
        var d=$.extend({},{
         'w':40,
         'h':30,
         'secne':null,
         'data':''
        },o);
        if(d.secne==null||!d.secne) return;
        this.div=$("<div></div>").css({'position': 'absolute','border':'1px solid #cde','left':'0px','top':'0px'}).html(d.data);
        this.w(d.w);
        this.h(d.h);
        this._ow=this.w();
        this._oh=this.h();
        $(d.secne).append(this.div);
        return this;
       }
       box.prototype.zoomw=function(v){
        if(v==undefined){
         this._zw=this._zw||1;
         return this._zw;
        }
        this.w(this.ow()*v,false);
        this._zw=v;
        return this;
       }
       box.prototype.zoomh=function(v){
        if(v==undefined){
         this._zh==this._zh||1;
         return this._zh;
        }
        this.h(this.oh()*v,false);
        this._zh=v;
        return this;
       }
       box.prototype.x=function(x){
        if(x==undefined){
         this._x=this._x||0;
         return this._x;
        }
        this.div.css({
         left:x-(this.w())/2
        })
        this._x=x;
        return this;
       }
       box.prototype.y=function(y){
        if(y==undefined){
         this._y=this._y||0;
         return this._y;
        }
        this.div.css({
         top:y-(this.h())/2
        })
        this._y=y;
        return this;
       }
       box.prototype.ow=function(){
        return this._ow||0;
       }
       box.prototype.oh=function(){
        return this._oh||0;
       }
       box.prototype.w=function(w,rs){
        if(w==undefined){
         w=this.div.css('width');
         w=w=='auto'?this.div.width():w;
         return parseInt(w);
        }
        if(rs!==false)
         this._ow=w;
        this.mx(-(w-this.w())/2);
        this.div.css({'width':w});
        return this;
       }
       box.prototype.h=function(h,rs){
        if(h==undefined){
         h=this.div.css('height');
         h=h=='auto'?this.div.height():h;
         return parseInt(h);
        }
        if(rs!==false)
         this._oh=h;
        this.my(-(h-this.h())/2);
        this.div.css({'height':h});
        return this;
       }
       box.prototype.mx=function(x){
        var div=this.div;
        div.css({'left': parseInt(div.css('left'))+x});
       }
       box.prototype.my=function(y){
        var div=this.div;
        div.css({'top':parseInt(div.css('top'))+y});
       }
       box.prototype.z=function(z){
        if(z==undefined)
         return this.div.css('z-index');
        this.div.css("z-index",z);
        return this;
       }
       //3d box
       function box3d(o){
        if(!$(o.secne))return;
        secne=o.secne;
        var secne=this.secne=$(secne);
        this.vx= parseInt(secne.css('width')=='auto'?secne.width():secne.css('width'))/2;
        this.vy= parseInt(secne.css('height')=='auto'?secne.height():secne.css('height'))/2;
        this.fl=o.fl||250;
        this.box=new box(o).z(0);
        this._set3d();
        return this;
       }
       box3d.prototype.x=function(x){
        if(x==undefined)
         return this._x||0;
        this._x=x||0;
        this._set3d();
        return this;
       }
       box3d.prototype.y=function(y){
        if(y==undefined)
         return this._y||0;
        this._y=y||0;
        this._set3d();
        return this;
       }
       box3d.prototype.z=function(z){
        if(z==undefined)
         return this._z||0;
        this._z=z||0;
        this._set3d();
        return this;
       }
       box3d.prototype._set3d=function(){
        var boxo=this.box;
        var fl=this.fl;
        var zomx=fl/(fl+this.z());
        var x=this.vx+zomx*this.x();
        var y=this.vy+zomx*this.y();
        boxo.zoomw(zomx).zoomh(zomx);
        boxo.x(x);
        boxo.y(y);
       }
       //
       function slide(o){
        var d=$.extend({},{
         'z':100,
         'secne':null
        },o);
        if(d.secne==null||!$(d.secne))return;
        this.cecne=d.secne;
        this.z=d.z;
        this.sleep=0.02;
        var k={'secne':d.secne,'w':80,'h':50,fl:1000};
        this.box=[];
        var c=8;
        for(var i=0;i<c;i++){
         var t= parseInt(i-c/2);
         var a=$('<div></div>').css({
          '100%',
          height:'100%',
          background:'#777'
         })
         k.data=a;
         var ubox=new box3d(k).z(300);
         this.r(ubox,t/2);
         this.box.push(ubox);
        }
        this.re_index();
       }
       slide.prototype._moveaction=function(){
        var _this=this;
        var s=this.sleep;
        for(var i=0;i<this.box.length;i++){
         this.r(this.box[i],s);
        }
        this.re_index();
       }
       slide.prototype.r=function(rbox,s){
        if(!(rbox instanceof box3d))
         return;
        var X=rbox.x();
        var Y=rbox.y()
        var Z=rbox.z();
        var New_X = X*Math.cos(s) - Z*Math.sin(s);
        var New_Z = X*Math.sin(s) + Z*Math.cos(s);
        var New_Y = Y;
        rbox.x(New_X);
        rbox.y(New_Y);
        rbox.z(New_Z);
       }
       slide.prototype.re_index=function(){
        var arr=this.box;
        var s=arr.length;
        for(var j=0;j<s-1;j++){
         for(var i=0;i<s-j-1;i++){
          if(arr[i].z()<arr[i+1].z()){
           var c=arr[i];
           arr[i]=arr[i+1];
           arr[i+1]=c;
          }
         }
        }
        for(var i=0;i<arr.length;i++){
         arr[i].box.z(i)
        }
       }
       slide.prototype.start=function(){
        this.run=1;
        this._move();
       }
       slide.prototype.stop=function(){
        this.run=0;
       }
       slide.prototype._move=function(s){
        var _this=this;
        setTimeout(function(){
         if(!_this.run){
          return;
         }
         _this._moveaction();
         _this._move();
        },50)
       }
       Sl.slide=slide;
      })()
      $(function(){
       var s=new Sl.slide({secne:'.s_c'});
       $('#start').click(function(){s.start()})
       $('#stop').click(function(){s.stop()})
      })
           </script></head>
<body>
     <div class='s_c'></div>
     <button id="start">start</button>
     <button id="stop">stop</button>
</body>
</html>