周末闲在家确实无聊。宅的不成样子了。偶然发现国外一个web设计的网站上有一个3D时钟。顿时来了兴趣。其实一看代码，不是svg，也不是canvas，而是简单的利用层级关系，大小关系作了一个视觉差。看起来会有立体运动的感觉。

　　于是，借着源码，我稍微把它整理一下，利用闭包规避了它大量的全局变量，稍微封装了一下，增加了几项可配置性。觉得好玩，分享给大家。
　　这个效果主要有两个核心的变换，一个是时钟整体圆周的变化，一个是组成时钟的小元素的位置和层级的变化。
　　核心变换代码主要有两段：

    mainloop: function () {
        // rotations
        _dir == 'left' ? A-=0.1 : A+=0.1;
        rx+=px;
        ry+=py;
        crx=Math.cos(rx);
        srx=Math.sin(rx);
        cry=Math.cos(ry+Math.PI/2);
        sry=Math.sin(ry+Math.PI/2);
        // return to the horizontale
        rx*=.9; ry*=.9; px*=.9; py*=.9;
        // refresh time
                .
                .
                .
        // call animation
        for(var i in O){
            for(var j in O[i].O){
                O[i].O[j].anim();
            }
        }
        setTimeout(arguments.callee,32);
    }        

        

        
        
      
        
it知识库：我们缺的不是技术，而是创意...，转载需保留来源！
        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。