猎人一直打猎发现太累了，他选择了布陷阱…，只要陷阱布置得多收益还是不错的，守株待兔也是一种策略。
南宁创业公司，专业小程序开发：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
