JS实现骰子3D旋转效果


Posted in Javascript onOctober 24, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
Highcharts入门之简介
Aug 02 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
小程序实现密码输入框
Nov 16 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
Vue可自定义tab组件用法实例
Oct 24 #Javascript
js实现转动骰子模型
Oct 24 #Javascript
js实现固定区域内的不重叠随机圆
Oct 24 #Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 #Javascript
windows实现npm和cnpm安装步骤
Oct 24 #Javascript
JS实现简单随机3D骰子
Oct 24 #Javascript
JS合并两个数组的3种方法详解
Oct 24 #Javascript
You might like
Wordpress php 分页代码
2009/10/21 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
浅谈js闭包理解
2019/03/28 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
Python中Threading用法详解
2017/12/27 Python
django创建超级用户过程解析
2019/09/18 Python
python安装gdal的两种方法
2019/10/29 Python
python可视化text()函数使用详解
2020/02/11 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
python中判断文件结束符的具体方法
2020/08/04 Python
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
办公室年终个人自我评价
2013/10/28 职场文书
家长对老师的感言
2014/03/11 职场文书
党校个人总结
2015/03/04 职场文书
学生会部长竞选稿
2015/11/19 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书