本文实例为大家分享了JS实现骰子3D旋转效果展示的具体代码，供大家参考，具体内容如下
创新互联建站是一家专注于成都网站设计、网站建设与策划设计,海湖新网站建设哪家好?创新互联建站做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:海湖新等地区。海湖新做网站价格咨询:13518219792
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部分代码：
/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">
这里引入了jquery ，支持火狐和谷歌，大家可以看下效果很简单。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
本文标题：JS实现骰子3D旋转效果
网页路径：
http://www.cdkjz.cn/article/joehdg.html
