JS實現(xiàn)骰子3D旋轉(zhuǎn)效果
更新時間：2019年10月24日 16:41:25 作者：小菜鳥的博客
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)骰子3D旋轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了原生js實現(xiàn)選項卡功能的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了js實現(xiàn)俄羅斯方塊小游戲分享,,需要的朋友可以參考下2014-01-01
D3.js封裝文本實現(xiàn)自動換行和旋轉(zhuǎn)平移等功能
之前小編和大家分享了SVG中如何配合使用text和tspan來實現(xiàn)換行的功能，所以這篇文章對此功能進行一下封裝，以后就可以直接用了。有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-10-10
下面小編就為大家分享一篇初探j(luò)s和簡單隱藏效果的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11
現(xiàn)在全屏的半透明遮罩層在web2.0網(wǎng)站應(yīng)用非常廣泛了，絕大多數(shù)遮罩是通過計算頁面大小，然后覆蓋一個與頁面同等大小的層實現(xiàn)，如騰訊qzone, wordpress后臺。2010-06-06
js自動閉合html標(biāo)簽(自動補全html標(biāo)記)
假如我有一個DIV，如果沒有閉合后面的樣式都會亂了，這樣的代碼可能會影響后面的樣式，我希望用ＪＳ去自動閉合這種沒有閉合的標(biāo)簽2012-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript自定義分頁樣式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了詳解javascript replace高級用法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
JavaScript實現(xiàn)像素鳥小游戲的詳細(xì)流程
最近通過javascript這門語言,然后結(jié)合html的來寫一個簡單的小游戲 ,這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)像素鳥小游戲的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
生成xmlhttp的方法有很多，在本文為大家介紹下javaScript中是如何實現(xiàn)的2013-12-12