【原】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）下 - 模仿智能社网页下的.md

标签：

之前看到智能社主页的那个骰子样式的钟表，最近研究了一下，虽然没有仔细看他是怎么做的，但是学了css3的动画之后想自己尝试着写一下，用到的原理可能和智能社网站的不太一样，我自己主要用到了css3和js。

1. 程序写到一半，发现只有chrome和ff支持，而用ie11是没有效果的，然后用ie11去打开智能社网页，效果也是没有，调查了一下，应该是transform-style:preserve-3d这个样式在ie11下还不支持，使得对象无法以3d的样式呈现，至于兼容方式，自己还没有花时间研究，所以这个效果暂时只能用chrome或者ff打开。
2. 复习了一下关于时间获取的语句var t = new Date(),另外还学习了如何获取当前时间的下一段时间的方式，比如获取当前时间的前一秒，思路是要用到时间戳getTime()，就是当前时间t到1970年的毫秒数，然后加上1000即可。具体代码如下：

var t = new Date(); //获取当前时间
var t_d = t.getTime(); //获取时间戳t_d，就是t到1970年的毫秒数
var t1 = new Date();//设置t1也是当前时间，这里我自己有个疑问，因为这里t1其实和t肯定是有一点时间差的，也许这个时间实在太短，可以忽略，或者我可以把这句接在var t的下面，让时间差尽量少
t1.setTime(t_d - 1000); //把时间戳减少1000毫秒，通过setTime对t1进行操作，就可以让t1成为t的前一秒事件

    3. will-change: transform;这个属性是可以增加css3动画的流畅度的，具体原理可以查看这篇张鑫旭的博客：http://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/

<style>
ul{
    padding: 0;margin: 0;
    list-style: none;
}
#wrap{
    margin: 70px auto;
    width: 800px;
    height: 80px;
    padding: 30px; 
    transform-origin: center center center;
    animation: move 5s linear infinite alternate;
    transform-style: preserve-3d;
    will-change: transform;
}
.outerbox{
    perspective: 500px;
    height: 80px; 
    margin: 10px;
 float: right;
    transform-origin: center center;
    transform-style: preserve-3d;
    transform: rotateY(10deg);
    will-change: transform;
}
.dice{
    width: 80px;
    height: 80px;
    transform-style: preserve-3d;
    transform-origin: 50% 50% -40px;
    transition: 0.3s cubic-bezier(.18,.95,.65,1.46);
    position: relative;
    will-change: transform;
}
.dice li{
    width: 78px;
    height: 78px;
    border: 1px solid black;
    font: 50px/80px arial;
    font-weight: bold;
    text-align: center;
    position: absolute;
    opacity: 0.4;
    will-change: transform;
}
.dice li:nth-of-type(2){
    top: -80px;
    transform-origin: bottom;
    transform: rotateX(90deg);
}
.dice li:nth-of-type(1){
}
.dice li:nth-of-type(4){
    top: 80px;
    transform-origin: top;
    transform: rotateX(-90deg);
}
.dice li:nth-of-type(3){
    transform: translateZ(-80px) rotateX(180deg);
}
.dice li:nth-of-type(5){
    left: 80px;
    transform-origin: left;
    transform: rotateY(90deg); 
}
.dice li:nth-of-type(6){
    left: -80px;
    transform-origin: right;
    transform: rotateY(-90deg);
}
.dice .colon{
    opacity: 1;
}
@keyframes move{
 0%{transform: rotateX(5deg) rotateY(5deg);}
 100%{transform: rotateX(-5deg) rotateY(-5deg);}
}
</style>
<script>
window.onload = function(){
 var aUl = document.getElementsByTagName(‘ul‘);
 
 for (var i=0;i<aUl.length;i++) {
        aUl[i].angle = 0;
        aUl[i].Index = 0;
        aUl[i].onOff = true;
 }
 
 function turn(obj,now,next){ //这里的now和next分别指的是另一个函数里要用到的变量，为了可以用它们，需要在这里先把它们当做参数写，然后在另外一个函数里调用时，将参数写进去
 var aLi = obj.getElementsByTagName(‘li‘);
 for (var i=0; i<aLi.length; i++) {
            aLi[i].index = i;
 }
 
        obj.Index_ = obj.Index + 1;
 
 if(obj.Index_ === 4){
            obj.Index_ = 0;
 }
 
 if(obj.onOff){
            aLi[obj.Index].innerHTML = now;
            obj.onOff = false;
 }
 
 if(now!==next){
            aLi[obj.Index_].innerHTML = now;
            obj.angle -= 90;
            obj.style.transform = ‘rotateX(‘+obj.angle+‘deg)‘;
            obj.Index++;
 }
 for (var i=0; i<4; i++) {
            aLi[i].style.opacity = 0.2;
            aLi[i].style.color = ‘lightgrey‘;
 }
 
 if(obj.Index === 4){
            obj.Index = 0;
 }
        aLi[obj.Index].style.opacity = 0.8;
        aLi[obj.Index].style.color = ‘black‘; 
        document.title=now+"::"+next;
 }
 
 function getTime(){
 var t = new Date();
 var iSec = t.getSeconds();
 var iMin = t.getMinutes();
 var iHour = t.getHours();
 
 var iSecR = iSec - parseInt(iSec/10)*10;
 var iSecL = parseInt(iSec/10);
 var iMinR = iMin - parseInt(iMin/10)*10;
 var iMinL = parseInt(iMin/10);
 var iHourR = iHour - parseInt(iHour/10)*10;
 var iHourL = parseInt(iHour/10);
 
 var t_d = t.getTime();
 
 var t1 = new Date();
        t1.setTime(t_d - 1000);
 var iSec_ = t1.getSeconds();
 var iMin_ = t1.getMinutes();
 var iHour_ = t1.getHours();
 var iSecR_ = iSec_ - parseInt(iSec_/10)*10;
 var iSecL_ = parseInt(iSec_/10);
 var iMinR_ = iMin_ - parseInt(iMin_/10)*10;
 var iMinL_ = parseInt(iMin_/10);
 var iHourR_ = iHour_ - parseInt(iHour_/10)*10;
 var iHourL_ = parseInt(iHour_/10); 
 
        turn(aUl[0],iSecR,iSecR_); //这里调用的时候将对应的变量传给now和next上即可
        turn(aUl[1],iSecL,iSecL_);
        turn(aUl[3],iMinR,iMinR_);
        turn(aUl[4],iMinL,iMinL_);
        turn(aUl[6],iHourR,iHourR_);
        turn(aUl[7],iHourL,iHourL_);
 
 }
    getTime();
    setInterval(getTime,1000);
 
};
</script>
</head>
<body>
 <div id="wrap">
 <div class="outerbox">
 <ul class="dice">
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 </ul>
 </div>
 <div class="outerbox"> 
 <ul class="dice">
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 </ul>
 </div>
 <div class="outerbox">
 <ul class="dice">
 <li class="colon">:</li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 </ul>
 </div>
 <div class="outerbox"> 
 <ul class="dice">
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 </ul>
 </div>
 <div class="outerbox">
 <ul class="dice">
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 </ul>
 </div>
 <div class="outerbox"> 
 <ul class="dice">
 <li class="colon">:</li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 </ul>
 </div>
 <div class="outerbox">
 <ul class="dice">
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 </ul>
 </div>
 <div class="outerbox"> 
 <ul class="dice">
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 <li></li> 
 </ul>
 </div> 
 </div> 
</body>
</html>

【原】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）下 - 模仿智能社网页下的.md

标签：

原文地址：http://www.cnblogs.com/bluefantasy728/p/5617412.html