这个是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>
时间： 2024-10-05 18:56:51