周末閑在家確實無聊。宅的不成樣子了。偶然發現國外一個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知識庫：我們缺的不是技術，而是創意...，轉載需保留來源！
        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。