JS实现骰子3D旋转效果
本文实例为大家分享了JS实现骰子3D旋转效果展示的具体代码，供大家参考，具体内容如下
css部分代码：
.dice_box {
width: 400px;
height: 400px;
position:relative;
margin:0 auto;
perspective: 900px;
-moz-perspective: 900px;
-webkit-perspective: 900px;
perspective-origin: 50%, 50%;
-moz-perspective-origin: 50%, 50%;
-webkit-perspective-origin: 50%, 50%;
}
#dice1 {
position: relative;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
top:-90px;
left:100px;
width: 150px;
height: 150px;
}
#dice2 {
position: relative;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
width: 150px;
left: 120px;
top: -150px;
height: 150px;
}
#dice3 {
position: relative;
top: -320px;
left: 20px;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
width: 150px;
height: 150px;
}
#dice3 ul li,#dice1 ul li,#dice2 ul li {
position: absolute;
list-style: none;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 50px;
}
#dice1 ul li:nth-of-type(1),#dice2 ul li:nth-of-type(1),#dice3 ul li:nth-of-type(1) {
top: 0px;
left: 50px;
-moz-transform-origin: bottom;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: bottom;
-webkit-transform: rotateX(-90deg);
}
#dice1 ul li:nth-of-type(2),#dice2 ul li:nth-of-type(2),#dice3 ul li:nth-of-type(2) {
top: 50px;
left: 50px;
}
#dice1 ul li:nth-of-type(3),#dice2 ul li:nth-of-type(3),#dice3 ul li:nth-of-type(3) {
top: 50px;
left: 100px;
-moz-transform-origin: left;
-moz-transform: rotateY(-90deg);
-webkit-transform-origin: left;
-webkit-transform: rotateY(-90deg);
}
#dice1 ul li:nth-of-type(4),#dice2 ul li:nth-of-type(4),#dice3 ul li:nth-of-type(4) {
top: 50px;
left: 0px;
-moz-transform-origin: right;
-moz-transform: rotateY(90deg);
-webkit-transform-origin: right;
-webkit-transform: rotateY(90deg);
}
#dice1 ul li:nth-of-type(5),#dice2 ul li:nth-of-type(5),#dice3 ul li:nth-of-type(5) {
top: 100px;
left: 50px;
-moz-transform-origin: top;
-moz-transform: rotateX(90deg);
-webkit-transform-origin: top;
-webkit-transform: rotateX(90deg);
}
#dice1 ul li:nth-of-type(6),#dice2 ul li:nth-of-type(6),#dice3 ul li:nth-of-type(6) {
top: 50px;
left: 50px;
-moz-transform: translateZ(50px);
-webkit-transform: translateZ(50px);
}
js部分代码：
function randomZeroOne(){
var n=Math.random();
if(n<0.5){
return 0;
}else{
return 1;
}
}
function calDice(a,b,c){
var all=$("#k3_hz div.bet_k3_hz div");
all.attr("class","k3_off");
$("div.dice_box").show();
$("#shadeDiv").show();
var i=0;
var k=0;
var n=0;
var index=1;
var r= setInterval(function(){
var x=randomZeroOne();
var y=randomZeroOne();
var z=randomZeroOne();
if(n>1500){
n=0;
k=0;
i=0;
var box= document.getElementById("dice1");
box.style.transform="rotate3d("+x+","+y+","+z+","+n+"deg)";
var box1= document.getElementById("dice2");
box1.style.transform="rotate3d("+x+","+y+","+z+","+k+"deg)";
var box2= document.getElementById("dice3");
box2.style.transform="rotate3d("+x+","+y+","+z+","+i+"deg)";
$(box).css({"-webkit-transform":"rotate3d("+x+","+y+","+z+","+n+"deg)"});
$(box1).css({"-webkit-transform":"rotate3d("+x+","+y+","+z+","+k+"deg)"});
$(box2).css({"-webkit-transform":"rotate3d("+x+","+y+","+z+","+i+"deg)"});
$("#dice1 li img").last().attr("src","/capricorn/resources/images/touch/"+a+".png");
$("#dice2 li img").last().attr("src","/capricorn/resources/images/touch/"+b+".png");
$("#dice3 li img").last().attr("src","/capricorn/resources/images/touch/"+c+".png");
clearInterval(r);
var m=setInterval(function(){
$("div.dice_box").hide();
$("#shadeDiv").hide();
code=a+b+c;
var all=$("#k3_hz div.bet_k3_hz div");
all.attr("class","k3_off");
$(all[code-4]).attr("class","k3_on");
clearInterval(m);
},1000);
return;
}
index=index+0.01;
i+=(120/index);
k+=(100/index);
n+=(60/index);
var box= document.getElementById("dice1");
$(box).css({"-webkit-transform":"rotate3d("+x+","+y+","+z+","+i+"deg)"});
box.style.transform="rotate3d("+x+","+y+","+z+","+i+"deg)";
var box1= document.getElementById("dice2");
$(box1).css({"-webkit-transform":"rotate3d(1,0,1,"+i+"deg)"});
box1.style.transform="rotate3d("+x+","+y+","+z+","+k+"deg)";
var box2= document.getElementById("dice3");
$(box2).css({"-webkit-transform":"rotate3d(0,1,1,"+i+"deg)"});
box2.style.transform="rotate3d("+x+","+y+","+z+","+n+"deg)";
},50);
}
html部分代码：
<div class="dice_box" style="display:none;z-index:110;">
<div id="dice1">
<ul>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/1.png"></li>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/2.png"></li>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/3.png"></li>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/4.png"></li>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/5.png"></li>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/6.png"></li>
</ul>
</div>
<div id="dice2">
<ul>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/1.png"></li>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/2.png"></li>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/3.png"></li>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/4.png"></li>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/5.png"></li>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/6.png"></li>
</ul>
</div>
<div id="dice3">
<ul>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/1.png"></li>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/2.png"></li>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/3.png"></li>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/4.png"></li>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/5.png"></li>
<li><img src="<%=request.getAttribute("basePath")%>/resources/images/touch/6.png"></li>
</ul>
</div>
</div>
这里引入了jquery ，支持火狐和谷歌，大家可以看下效果很简单。
