<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网友Adam‘分享用Aui-core+CSS3实用3D骰子JS特效</title>
<meta name="Keywords" content="网友Adam‘分享用Aui-core+CSS3实用3D骰子JS特效,Jquery插件,Jquery原创,Jquery资源,Jquery特效,div+css,JquerySchool" />
<meta name="description" content="JquerySchool是一个专门分享jquery资源、jquery插件、jquery特效的一个网站,完全开放源代码,把实际开发中应用最多、最实用的Jquery资源抽取出来再加以精心编排,让广大网友能以最短的时间、花最少的精力去真正掌握jQuery开发的知识。" />
<style>
* { margin:0; padding:0; }
body { background:#efefef; overflow:hidden; }
h1 {
text-align:center; margin-top:40px; text-shadow:1px 1px 3px #000; font-size:40px; color:#fff;
}
#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;
}
</style>
</head>
<body>
<div id="container" style="left: 400px; -webkit-transform: perspective(2000px) rotateX(-23.07009431989053deg) rotateY(50.400000000000006deg); transform: perspective(2000px) rotateX(-23.07009431989053deg) rotateY(50.400000000000006deg);">
<div id="box-1" style="-webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(72px) scaleX(0.6) scaleY(0.6); transform: rotateX(0deg) rotateY(0deg) translateZ(72px) scaleX(0.6) scaleY(0.6); opacity: 1;">
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li>
<span></span>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div id="box-2" style="-webkit-transform: rotateX(0deg) rotateY(90deg) translateZ(72px) scaleX(0.6) scaleY(0.6); transform: rotateX(0deg) rotateY(90deg) translateZ(72px) scaleX(0.6) scaleY(0.6); opacity: 1;">
<div>
<ul>
<li>
<span></span>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>
<span></span>
</li>
</ul>
</div>
</div>
<div id="box-3" style="-webkit-transform: rotateX(0deg) rotateY(180deg) translateZ(72px) scaleX(0.6) scaleY(0.6); transform: rotateX(0deg) rotateY(180deg) translateZ(72px) scaleX(0.6) scaleY(0.6); opacity: 1;">
<div>
<ul>
<li>
<span></span>
</li>
<li></li>
<li></li>
<li></li>
<li>
<span></span>
</li>
<li></li>
<li></li>
<li></li>
<li>
<span></span>
</li>
</ul>
</div>
</div>
<div id="box-4" style="-webkit-transform: rotateX(0deg) rotateY(270deg) translateZ(72px) scaleX(0.6) scaleY(0.6); transform: rotateX(0deg) rotateY(270deg) translateZ(72px) scaleX(0.6) scaleY(0.6); opacity: 1;">
<div>
<ul>
<li>
<span></span>
</li>
<li></li>
<li>
<span></span>
</li>
<li></li>
<li></li>
<li></li>
<li>
<span></span>
</li>
<li></li>
<li>
<span></span>
</li>
</ul>
</div>
</div>
<div id="box-5" style="-webkit-transform: rotateX(-90deg) rotateY(0deg) translateZ(72px) scaleX(0.6) scaleY(0.6); transform: rotateX(-90deg) rotateY(0deg) translateZ(72px) scaleX(0.6) scaleY(0.6); opacity: 1;">
<div>
<ul>
<li>
<span></span>
</li>
<li></li>
<li>
<span></span>
</li>
<li></li>
<li>
<span></span>
</li>
<li></li>
<li>
<span></span>
</li>
<li></li>
<li>
<span></span>
</li>
</ul>
</div>
</div>
<div id="box-6" style="-webkit-transform: rotateX(90deg) rotateY(0deg) translateZ(72px) scaleX(0.6) scaleY(0.6); transform: rotateX(90deg) rotateY(0deg) translateZ(72px) scaleX(0.6) scaleY(0.6); opacity: 1;">
<div>
<ul>
<li>
<span></span>
</li>
<li></li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li></li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li></li>
<li>
<span></span>
</li>
</ul>
</div>
</div>
</div>
<strong id="shadow" style="left: 220px; opacity: 1; top: 400px;"></strong>
<!-- <script src="js/Aui-core-1.42-min.js" language="javascript" type="text/javascript"></script>
-->
<script src="js/zepto.min.js" language="javascript" type="text/javascript"></script>
<script>
var oContainer = $("#container"),
pers = 2000;
var transform = function( elem, value, key )
{
key = key || "transform";
var arr=[ "-webkit-", "-moz-", "-ms-", "-o-", "" ];
// for( var pre in arr ){
// elem.style[ arr[pre] + key ] = value;
// };
for (var i = 0; i < arr.length; i++) {
//elem.style.arr[i]+key = value;
elem.css(arr[i]+key,value);
};
return elem;
},
startMove = function startMove( obj )
{
obj.timer = obj.timer || null;
clearInterval( obj.timer );
obj.timer = setInterval (function ()
{
x -= speedY;
y += speedX;
speedY *= 0.95;
speedX *= 0.95;
if( Math.abs( speedX ) < 0.1 && Math.abs( speedY ) < 0.1 )
{
stopMove( obj.timer );
};
transform( obj, "perspective(" + pers + "px) rotateX("+ x +"deg) rotateY(" + y +"deg)" );
}, 30);
},
stopMove = function( t )
{
clearInterval( t );
};
var oDoc = $(document),
docWidth = oDoc.width();
oDoc.mousedown( function( e ){
var moveX = e.clientX,
moveY = e.clientY;
var startX = 0;
var startY = 0;
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;
});
</script>
</body>
</html>
