JS实现骰子3D旋转效果

更新时间：2019年10月24日 16:41:25 作者：小菜鸟的博客

这篇文章主要为大家详细介绍了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部分代码：

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

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

您可能感兴趣的文章:

js
骰子

原生js实现选项卡功能
本文主要介绍了原生js实现选项卡功能的实例，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
js实现俄罗斯方块小游戏分享
这篇文章主要介绍了js实现俄罗斯方块小游戏分享,,需要的朋友可以参考下
2014-01-01
D3.js封装文本实现自动换行和旋转平移等功能
之前小编和大家分享了SVG中如何配合使用text和tspan来实现换行的功能，所以这篇文章对此功能进行一下封装，以后就可以直接用了。有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-10-10
初探js和简单隐藏效果的实例
下面小编就为大家分享一篇初探js和简单隐藏效果的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-11-11
lightBox 简易的全屏透明遮罩解决方法
现在全屏的半透明遮罩层在web2.0网站应用非常广泛了，绝大多数遮罩是通过计算页面大小，然后覆盖一个与页面同等大小的层实现，如腾讯qzone, wordpress后台。
2010-06-06
js自动闭合html标签(自动补全html标记)
假如我有一个DIV，如果没有闭合后面的样式都会乱了，这样的代码可能会影响后面的样式，我希望用ＪＳ去自动闭合这种没有闭合的标签
2012-10-10
JavaScript自定义分页样式
这篇文章主要为大家详细介绍了JavaScript自定义分页样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
详解javascript replace高级用法
这篇文章主要介绍了详解javascript replace高级用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-02-02
JavaScript实现像素鸟小游戏的详细流程
最近通过javascript这门语言,然后结合html的来写一个简单的小游戏 ,这篇文章主要给大家介绍了关于JavaScript实现像素鸟小游戏的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
javaScript如何生成xmlhttp
生成xmlhttp的方法有很多，在本文为大家介绍下javaScript中是如何实现的
2013-12-12

JS实现骰子3D旋转效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具