JS实现骰子3D旋转效果
本文实例为大家分享了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">