此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;

}</pre>

JS代碼如下：

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;
});
效果如下：



在線演示和下載