用Aui-core+CSS3实现3D骰子JS特效

此js特效是网友Adam‘他用自己写的一个JS框架Aui-core+css3实现的，滚动鼠标滚轮时可以放大，骰子会慢慢的变形一直到可以看骰子里的世界，效果非常棒，因为用css3的缘故，所以网友们在浏览的时间请不要用IE浏览器来运行，为了让网友们看到最终效果请使用谷歌、火狐等浏览打开运行。

样式代码如下：

#shadow {   height:300px; width:600px; position:absolute; top:400px; left:0; z-index:0;   background:-webkit-radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );   background:-moz-radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );   background:-ms-radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );   background:-o-radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );   background:radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );   -webkit-transform:perspective(100px) rotateX(60deg) rotateY(0deg);   -moz-transform:perspective(100px) rotateX(60deg) rotateY(0deg);   -ms-transform:perspective(100px) rotateX(60deg) rotateY(0deg);   -o-transform:perspective(100px) rotateX(60deg) rotateY(0deg);   transform:perspective(100px) rotateX(60deg) rotateY(0deg);   opacity:0;  }    #container {   /*background:black;*/   height:240px; width:240px; position:absolute; top:180px; z-index:1;   -webkit-transform-style:preserve-3d;   -moz-transform-style:preserve-3d;   -ms-transform-style:preserve-3d;   -o-transform-style:preserve-3d;   transform-style:preserve-3d;   -webkit-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;   -moz-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;   -ms-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;   -o-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;   transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;  }  #container p {   position:absolute;   top:40%;   left:35%;   padding:5px;   word-spacing:0.2em;   line-height:20px;   background:black;   color:#fff;   text-align:center;  }  #container div {     height:240px; width:240px; position:absolute; left:0; top:0; color:#fff; line-height:240px; text-align:center; font-weight:bold; font-size:80px; cursor:pointer;     background:rgba( 239,239,239, 1 );    -webkit-transition:500ms all ease;    -moz-transition:500ms all ease;    -ms-transition:500ms all ease;    -o-transition:500ms all ease;    transition:500ms all ease;  }  #container div div {   border:1px solid #fff; /* rgba( 255,255,255, 1 ) */   box-shadow:1px 0 3px #fff,1px 0px 10px #efefef;      border-radius:8px;   background:-webkit-radial-gradient(center, #d81002, #b20c00 );   background:-moz-radial-gradient(center, #d81002, #b20c00 );   background:-ms-radial-gradient(center, #d81002, #b20c00 );   background:-o-radial-gradient(center, #d81002, #b20c00 );   background:radial-gradient(center, #d81002, #b20c00 );  }  #container div div:hover {   background:-webkit-radial-gradient(center, #f00, #b20c00 );   background:-moz-radial-gradient(center, #f00, #b20c00 );   background:-ms-radial-gradient(center, #f00, #b20c00 );   background:-o-radial-gradient(center, #f00, #b20c00 );   background:radial-gradient(center, #f00, #b20c00 );  }  #container div ul {   list-style:none;   margin:30px;  }  #container div li {   width: 60px;   height:60px;   float:left;   overflow:hidden;   -webkit-transition:500ms all ease;   -moz-transition:500ms all ease;   -ms-transition:500ms all ease;   -o-transition:500ms all ease;   transition:500ms all ease;  }    #container div li span  {    width:50px; height:50px; margin:5px auto;   display:block;   background:-webkit-linear-gradient(top, #eee, #fff );   background:-moz-linear-gradient(top, #eee, #fff );   background:-ms-linear-gradient(top, #eee, #fff );   background:-o-linear-gradient(top, #eee, #fff );   background:linear-gradient(top, #eee, #fff );   border-radius:25px;   box-shadow:-1px -1px 2px #000;  }

oDoc.mousedown( function( e ){      var moveX = e.clientX,    moveY = e.clientY;       var startX = x;   var startY = y;      var lastX = moveX;   var lastY = moveY;      speedX = speedY = 0;    oDoc.mousemove( function( e ){     y = startY + ( e.clientX - moveX )/5;    x = startX - ( e.clientY - moveY )/5;         transform( oContainer, "perspective(" + pers + "px) rotateX("+ Math.ceil( x ) +"deg) rotateY(" + Math.ceil( y ) +"deg)" );        speedX = Math.ceil( ( e.clientX - lastX )/2 );        speedY = Math.ceil( ( e.clientY - lastY )/2 );        lastX = e.clientX;    lastY = e.clientY;       });      oDoc.mouseup( function(){    this.onmousemove = null;    this.onmouseup = null;    startMove( oContainer );   });      stopMove( oContainer.timer );      return false;  });