标签：
这个是3D旋转的进阶版，是一个类似与骰子的正方体。这个版本只有秒数的个位数，还没有写整个钟表，下面那个版本好好想想该怎么写
transform-style: preserve-3d。transform: rotateX, rotateY, rotateZ来定义物体转动轴，实现3D旋转transform: translateZ()来让这个面沿着Z轴移动到后面，同时要让这个面上的数字或者文字还要translateX(180deg)，这样就能让背面的那个字转过来是正着的，否则它在背面是正的时候再转过来就变成倒着的了rotateY(10deg)，但是直接加载box上会有问题，为了让它转动，已经加过一次transform:rotateX，再加一个transform会把这个覆盖，所以想到了，在这个box外面再加一个outerbox，让outerbox往右倾斜就可以。个位=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>
【学】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）上—— 妙味课堂
标签：
原文地址：http://www.cnblogs.com/bluefantasy728/p/5617399.html
