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 相关文章推荐
基于Jquery的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 Javascript
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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
学习ExtJS table布局
2009/10/08 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Python 函数基础知识汇总
2018/03/09 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
容易被忽略的Python内置类型
2020/09/03 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
毕业设计说明书
2014/05/07 职场文书
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python