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 相关文章推荐
Javascript MD4
Dec 20 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
JavaScript this关键字的深入详解
Jan 14 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
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
php抽象类用法实例分析
2015/07/07 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
jQuery实现本地存储
2020/12/22 jQuery
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
Python合并多个Excel数据的方法
2018/07/16 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
python读取指定字节长度的文本方法
2019/08/27 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
小学运动会班级口号
2014/06/09 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫