这个是3D旋转的进阶版，是一个类似与骰子的正方体。这个版本只有秒数的个位数，还没有写整个钟表，下面那个版本好好想想该怎么写
- 这个效果需要用到
transform-style: preserve-3d。 - 利用
transform: rotateX, rotateY, rotateZ来定义物体转动轴，实现3D旋转 - 给一个正方体设置6个面，每个面都设置旋转基面，并且直接先朝各个方向转90度，有一个面要注意，就是和最前面的那个面的对面，不用转，但是要用
transform: translateZ()来让这个面沿着Z轴移动到后面，同时要让这个面上的数字或者文字还要translateX(180deg)，这样就能让背面的那个字转过来是正着的，否则它在背面是正的时候再转过来就变成倒着的了 - 为了让这个骰子有点看上去是有点往右倾斜，就想到给它
rotateY(10deg)，但是直接加载box上会有问题，为了让它转动，已经加过一次transform:rotateX，再加一个transform会把这个覆盖，所以想到了，在这个box外面再加一个outerbox，让outerbox往右倾斜就可以。 - 在转动一次之后，要让即将转过来的那个面的数字变成下一秒的个位数
- 复习一下如何取到一个2位数的个位数字和十位数字。
个位=x- parseInt(x/10)*10;十位数字=parseInt(x/10);
<style>#wrap{ margin: 70px auto; width: 100px; height: 100px; padding: 100px; perspective: 900px; //注意要把perspective写最外面}#outerbox{ width: 100px; height: 100px; transform-origin: center center; transform-style: preserve-3d; //为了让骰子总是向左斜10度，要在外面再加一层，并让它具有3d样式 transform: rotateY(10deg); }#box{ width: 100px; height: 100px; transform-style: preserve-3d; transform-origin: 50% 50% -49px; transition: 0.3s cubic-bezier(.18,.95,.65,1.46); position: relative;}#box div{ width: 98px; height: 98px; border: 1px solid black; font: 50px/100px arial; text-align: center; position: absolute; opacity: 0.4;}#box div:nth-of-type(2){ top: -100px; transform-origin: bottom; transform: rotateX(90deg);}#box div:nth-of-type(1){}#box div:nth-of-type(4){ top: 100px; transform-origin: top; transform: rotateX(-90deg);}#box div:nth-of-type(3){ transform: translateZ(-100px) rotateX(180deg);}#box div:nth-of-type(5){ left: 100px; transform-origin: left; transform: rotateY(90deg); }#box div:nth-of-type(6){ left: -100px; transform-origin: right; transform: rotateY(-90deg);}</style><script>window.onload = function(){ var oBox = document.getElementById('box'); var angle = 0; var Index = 0; var aDiv = oBox.getElementsByTagName('div'); for (var i=0; i<aDiv.length; i++) { aDiv[i].index = i; } function rote(){ var oDate = new Date(); var iSec = oDate.getSeconds(); var iSecS = iSec - parseInt(iSec/10)*10; var iSecD = parseInt(iSec/10); oBox.style.transform = 'rotateX('+angle+'deg)'; angle -= 90; if(Index===4){ Index=0; } document.title=iSecS; aDiv[Index].innerHTML = iSecS; Index++; } rote(); setInterval(rote,1000);};</script></head><body> <div id="wrap"> <div id="outerbox"> <div id="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div> </body>