自动旋转的骰子代码html,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部分代码：

• /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 ，支持火狐和谷歌，大家可以看下效果很简单。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。