本文实例为大家分享了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 ，支持火狐和谷歌，大家可以看下效果很简单。

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