fbpx

Firefox套件《Tilt》將網頁3D模組化,一眼看出網頁切版結構

這二天看到一個相當酷的東西,就是能夠將網頁畫面3D模組化的一款Firefox套件《Tilt》,這東西要先告訴大家他沒有什麼「實質」上的用途,純粹是滿足「視覺」上的享受,透過這款套件,可以運用Firefox上的WebGL技術將網頁3D模組化,雖然乍看之下沒有什麼用途,不過這或許可以用作研究DIV結構,很清楚的看出來別人的網頁是如何切版的哦。

Firefox套件「Tilt」小檔案:

官方網站:請點我
Xpi檔案下載:請點我

Firefox套件「Tilt」使用介紹:

首先在上方點擊下載Tilt.xpi這個套件檔案,儲存下來。

01

然後開啟Firefox瀏覽器,直接將Tilt.xpi拖曳進去。

02




就會出現安裝畫面囉,點擊「立即安裝」,安裝成功後會重新啟動Firefox。

03

再來就可以開個網頁,然後點擊快速鍵「Ctrl+Shift+L」就可以看到網頁3D化囉,這邊要注意一點,如果你有安裝「Firebug」這個擴充套件,必須先停用,因為快捷鍵重覆囉。

04

在開始翻轉之前,可以點擊右上角有一個「HELP」裡面有說明如何操作:

  • ESC:離開3D畫面
  • A/S/W/D:翻轉畫面的上下左右
  • 方向鍵:整個畫面平移上下左右
  • 滑鼠左鍵按住拖曳:翻轉畫面
  • 滑鼠右鍵按住拖曳:平移整個畫面

04-1

畫面真的相當的3D呀,該凸的都出了出來(雖然網頁不能點),其實這個3D效果看似沒什麼特別作用,不過仔細看的了一下,顯示3D的部份,應該是依據DIV切版來顯示,因此如果真的要說有什麼用途,就是可以很直覺化的看出別人的網頁切版是怎麼樣的結構,再比對原始碼會更容易看懂。

05

整個翻轉到背面,是平面的,而且是完全反過來的網頁,真是好玩。

06

你可能對這些內容也有興趣

作者:阿湯

對電腦 & 網路資訊充滿興趣與熱情、瘋了似的每日堅持發文,「阿湯」這個名字是由湯姆克魯斯而來的,雖然我沒有他帥氣,也不會演電影,但我會寫文章....

更多關於的文章》

8 個留言

  1. 阿達猴表示:

    有了有了..點了兩封非垃圾信,目前收到的就是正常的了….

    阿湯說:

    呵…

  2. 阿達猴表示:

    怪了~已經點了非垃圾信..還是一樣進去..

    阿湯說:

    這個嘛~無解= =,不然把我的信箱加入通訊錄吧

  3. 阿達猴表示:

    題外話…回文通知會被Gmail當垃圾信…進去兩、三次了,剛剛特別去點非垃圾郵件,希望下次不會被送進去..
    (寄件人:������½@localhost.localdomain)
    真是奇怪的信箱呀..

    阿湯說:

    改了一下~還是進去垃圾信~謝謝你的提醒~之前不會這樣說….

  4. Josh表示:

    這看起來不錯玩耶!
    看網頁結構很實用…

    阿湯說:

    還不賴

  5. 我是人表示:

    簡易來說,可以隨意操控網頁囉!?

    阿湯說:

    只是個效果

  6. Werboy表示:

    那廣告不知道包了幾層東西在理面…這麼高

    阿湯說:

    真恐怖的blogad

  7. 台東番仔火表示:

    樓上的梗不錯
    哈哈哈~

    阿湯說:

    XD

  8. 阿達猴表示:

    您右側的廣告可以蓋大樓了….

    阿湯說:

    呵 blogad的..太誇張

發表留言 »

姓名(*)
信箱(*)