JS實(shí)現(xiàn)骰子3D旋轉(zhuǎn)效果
更新時(shí)間：2019年10月24日 16:41:25 作者：小菜鳥的博客
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)骰子3D旋轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS實(shí)現(xiàn)骰子3D旋轉(zhuǎn)效果展示的具體代碼，供大家參考，具體內(nèi)容如下
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 ，支持火狐和谷歌，大家可以看下效果很簡單。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
淺析Javascript ES6新增值比較函數(shù)Object.is
在Javascript中判斷相等是很常見的，常用的判斷有“==”，“===”，“！=”，“！==”，今天這篇文章我們來學(xué)習(xí)ES6中的一個(gè)方法Object.is()，有需要的可以參考學(xué)習(xí)。2016-08-08
一文帶你掌握J(rèn)avaScript中的EventLoop機(jī)制
JavaScript是?單線程、非阻塞?的,它通過事件隊(duì)列?(Event?Loop)?的方式來實(shí)現(xiàn)異步回調(diào),所以本文小編就帶大家來深入了解一下JavaScript中的EventLoop機(jī)制,需要的可以了解下2024-02-02
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù).這篇文章通過實(shí)例代碼給大家介紹了javascript閉包的使用之按鈕切換功能，感興趣的朋友一起看看吧2018-08-08
下面小編就為大家分享一篇初探j(luò)s和簡單隱藏效果的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-11-11
uniapp開發(fā)安卓App實(shí)現(xiàn)高德地圖路線規(guī)劃導(dǎo)航功能的全過程
最近項(xiàng)目需要在APP內(nèi)實(shí)現(xiàn)路線規(guī)劃導(dǎo)航功能,直接打開高德地圖進(jìn)行導(dǎo)航,下面這篇文章主要給大家介紹了關(guān)于利用uniapp開發(fā)安卓App實(shí)現(xiàn)高德地圖路線規(guī)劃導(dǎo)航功能的相關(guān)資料,需要的朋友可以參考下2022-08-08
如何學(xué)JavaScript？前輩的經(jīng)驗(yàn)之談
這篇文章主要介紹了如何學(xué)JavaScript？前輩的經(jīng)驗(yàn)之談，也就是怎么學(xué)前端的問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
用JavaScript修改網(wǎng)頁樣式2008-04-04
下面小編就為大家?guī)硪黄袹avaScript代碼改成ES6語法不完全指南(分享)。小編覺得挺不錯(cuò)的，現(xiàn)在就想給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
微信小程序跨頁面數(shù)據(jù)傳遞事件響應(yīng)實(shí)現(xiàn)過程解析
這篇文章主要介紹了微信小程序跨頁面數(shù)據(jù)傳遞事件響應(yīng)實(shí)現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
用JavaScript實(shí)現(xiàn)簡單網(wǎng)頁時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了用JavaScript實(shí)現(xiàn)簡單網(wǎng)頁時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08