獵人一直打獵發現太累了，他選擇了布陷阱…，只要陷阱佈置得多收益還是不錯的，守株待兔也是一種策略。
南寧創業公司，專業小程序開發：www.zkelm.com
今天得教程就是把昨天的立體方塊弄成一個骰子。在上面加入一些點 結合上次的教程。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D立方塊的製作</title>
<style>
body{background: #000;}
.box{
position: absolute;
width:85px;
height: 85px;
margin:50px;
transform-style:preserve-3d;
transform:rotateX(20deg) rotateY(50deg);
}
.box > div{
position: absolute;
left:0;top:0;
width:100%;height:100%;
border:5px solid #cdcdcd;
border-radius: 8px;
}
.up{
background-color: #ddd;
transform:translatey(-42.5px) rotatex(90deg);
display: flex;
justify-content: center;
align-items: center;
}
.down{
background-color: #ddd;
transform:translatey(42.5px) rotatex(90deg);
display: flex;
justify-content: space-between;
}
.down .items:nth-child(2){
align-self:flex-end;
}
.left{
background-color:#ddd;
transform:translatex(-42.5px) rotatey(90deg);
display: flex;
justify-content: space-between;
}
.left .items:nth-child(2){
align-self:center;
}
.left .items:nth-child(3){
align-self:flex-end;
}
.right{
background-color:#ddd;
transform:translatex(42.5px) rotatey(90deg);
display: flex;
flex-direction:column;
justify-content: space-between;
}
.column{
display: flex;
justify-content: space-between;
}
.back{
background-color:#ddd;
transform:translatez(-42.5px) ;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.forward{
background-color:#ddd;
transform:translatez(42.5px) ;
display: flex;
flex-direction:column;
justify-content: space-between;
}
.forward .column:nth-child(2){
justify-content: center;
}
.items{
margin:3px;
width:20px;
height: 20px;
background: #000;
border-radius:50%;
}
@keyframes myfirst{
0%{left:0px;top:0px;transform:rotatex(0deg) rotatey(0deg)}
100%{left:400px;top:100px;transform:rotatex(360deg) rotatey(100deg)}
}
.myclass{
animation: myfirst 5s;
}
</style>
</head>
<body>
<div id="mbox" class="box" onclick="myfun()">
<div class="up"><div class="items"></div></div>
<div class="down">
<div class="items"></div>
<div class="items"></div>
</div>
<div class="left">
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
</div>
<div class="right">
<div class="column">
<div class="items"></div>
<div class="items"></div>
</div>
<div class="column">
<div class="items"></div>
<div class="items"></div>
</div>
</div>
<div class="forward">
<div class="column">
<div class="items"></div>
<div class="items"></div>
</div>
<div class="column">
<div class="items"></div>
</div>
<div class="column">
<div class="items"></div>
<div class="items"></div>
</div>
</div>
<div class="back">
<div class="column">
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
</div>
<div class="column">
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
</div>
</div>
</div>
<script>
function myfun(){
document.querySelector(".box").classList.add('myclass');
setTimeout(function(){
document.querySelector(".box").classList.remove('myclass');
},5000)
}
</script>
</body>
</html>
效果圖如下：
這裏用到兩個知識新點：javascript操作Dom的， 這個我接下來就是要學習的一個方向， 學習原生的JS對Dom的操作，
document.querySelector("div")
比如這句話 他的意思就是選擇 第一個div
document.querySelectorAll("div")
這個是意思是選擇所有的div元素 ！ 返回的是一個數組
<script>
document.querySelector("div").className="box"
document.querySelertor("div").style="background:#666";
</script>
**此兩句代碼的區別在於：className=“myclass” 此句代碼會執行 在html 裏面替換掉class得值
比如原句
<div class="box"></div>
執行之後就會變成
<div class="myclass"></div>
而Style 則會覆蓋Style的值，例如
<div id="myid" style="color:#f55">我的字體是紅色
<script>
document.getElementById("myid").style="background:#666";
</script>
</div>
執行的結果是：
style的值直接被覆蓋了， 沒有了前面的 color：#f55
南寧小程序定製：www.zkelm.com