首先非常感谢网友Adam‘的无私分享，此js特效是他用自己写的一个JS框架Aui-core+css3实现的，滚动鼠标滚轮时可以放大，骰子会慢慢的变形一直到可以看骰子里的世界，效果非常棒，因为用css3的缘故，所以网友们在浏览的时间请不要用IE浏览器来运行，为了让网友们看到最终效果请使用谷歌、火狐等浏览打开运行。
CSS3样式代码如下：
#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;
}
Aui-core主要核心代码如下：
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;
});
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
Aui-core css3 3D特效 js特效 网友Adam’ 图片3D旋转