JS实现骰子3D旋转效果

2023-08-10 10:57:04 347

本文实例为大家分享了JS实现骰子3D旋转效果展示的具体代码，供大家参考，具体内容如下

css部分代码：

.dice_box{
width:400px;
height:400px;
position:relative;
margin:0auto;
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;
}

#dice3ulli,#dice1ulli,#dice2ulli{
position:absolute;
list-style:none;
width:50px;
height:50px;
line-height:50px;
text-align:center;
font-size:50px;
}

#dice1ulli:nth-of-type(1),#dice2ulli:nth-of-type(1),#dice3ulli:nth-of-type(1){
top:0px;
left:50px;
-moz-transform-origin:bottom;
-moz-transform:rotateX(-90deg);
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(-90deg);
}
#dice1ulli:nth-of-type(2),#dice2ulli:nth-of-type(2),#dice3ulli:nth-of-type(2){
top:50px;
left:50px;
}

#dice1ulli:nth-of-type(3),#dice2ulli:nth-of-type(3),#dice3ulli:nth-of-type(3){
top:50px;
left:100px;
-moz-transform-origin:left;
-moz-transform:rotateY(-90deg);
-webkit-transform-origin:left;
-webkit-transform:rotateY(-90deg);
}

#dice1ulli:nth-of-type(4),#dice2ulli:nth-of-type(4),#dice3ulli:nth-of-type(4){
top:50px;
left:0px;
-moz-transform-origin:right;
-moz-transform:rotateY(90deg);
-webkit-transform-origin:right;
-webkit-transform:rotateY(90deg);
}

#dice1ulli:nth-of-type(5),#dice2ulli:nth-of-type(5),#dice3ulli:nth-of-type(5){
top:100px;
left:50px;
-moz-transform-origin:top;
-moz-transform:rotateX(90deg);
-webkit-transform-origin:top;
-webkit-transform:rotateX(90deg);
}

#dice1ulli:nth-of-type(6),#dice2ulli:nth-of-type(6),#dice3ulli:nth-of-type(6){
top:50px;
left:50px;
-moz-transform:translateZ(50px);
-webkit-transform:translateZ(50px);
}

js部分代码：

functionrandomZeroOne(){
varn=Math.random();
if(n<0.5){
return0;
}else{
return1;
}
}
functioncalDice(a,b,c){
varall=$("#k3_hzdiv.bet_k3_hzdiv");
all.attr("class","k3_off");
$("div.dice_box").show();
$("#shadeDiv").show();
vari=0;
vark=0;
varn=0;
varindex=1;
varr=setInterval(function(){
varx=randomZeroOne();
vary=randomZeroOne();
varz=randomZeroOne();
if(n>1500){
n=0;
k=0;
i=0;
varbox=document.getElementById("dice1");
box.style.transform="rotate3d("+x+","+y+","+z+","+n+"deg)";
varbox1=document.getElementById("dice2");
box1.style.transform="rotate3d("+x+","+y+","+z+","+k+"deg)";
varbox2=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)"});
$("#dice1liimg").last().attr("src","/capricorn/resources/images/touch/"+a+".png");
$("#dice2liimg").last().attr("src","/capricorn/resources/images/touch/"+b+".png");
$("#dice3liimg").last().attr("src","/capricorn/resources/images/touch/"+c+".png");
clearInterval(r);
varm=setInterval(function(){
$("div.dice_box").hide();
$("#shadeDiv").hide();
code=a+b+c;
varall=$("#k3_hzdiv.bet_k3_hzdiv");
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);
varbox=document.getElementById("dice1");
$(box).css({"-webkit-transform":"rotate3d("+x+","+y+","+z+","+i+"deg)"});
box.style.transform="rotate3d("+x+","+y+","+z+","+i+"deg)";
varbox1=document.getElementById("dice2");
$(box1).css({"-webkit-transform":"rotate3d(1,0,1,"+i+"deg)"});
box1.style.transform="rotate3d("+x+","+y+","+z+","+k+"deg)";
varbox2=document.getElementById("dice3");
$(box2).css({"-webkit-transform":"rotate3d(0,1,1,"+i+"deg)"});
box2.style.transform="rotate3d("+x+","+y+","+z+","+n+"deg)";
},50);
}

html部分代码：




/resources/images/touch/1.png">
/resources/images/touch/2.png">
/resources/images/touch/3.png">
/resources/images/touch/4.png">
/resources/images/touch/5.png">
/resources/images/touch/6.png">

/resources/images/touch/1.png">
/resources/images/touch/2.png">
/resources/images/touch/3.png">
/resources/images/touch/4.png">
/resources/images/touch/5.png">
/resources/images/touch/6.png">

/resources/images/touch/1.png">
/resources/images/touch/2.png">
/resources/images/touch/3.png">
/resources/images/touch/4.png">
/resources/images/touch/5.png">
/resources/images/touch/6.png">

JS实现骰子3D旋转效果

热门推荐

随机推荐