網絡已經從撥號互聯網和GeoCities頁面走了很長一段路。網站現在具有完全響應能力，可通過觸摸屏設備訪問。但現代瀏覽器已經超越了“主流”網頁設計。

只使用前端技術就可以在瀏覽器中創建出色的3D效果。在這篇文章中，將展示最受歡迎的3D網絡項目，它們展示了網絡在短短幾十年內的發展程度。

開普勒軌道

我無法想象建立這個開普勒軌道路徑的現實模型需要多長時間。這個模型顯示了一個身體相對于另一個身體在太空中的運動，在這種情況下，開發人員Danie Clawson做了一項令人難以置信的工作。

整個模型使用CSS進行視覺效果，使用Three.js進行3D效果。在左上角，您將找到一個選項框，您可以在其中更改許多軌道變量以影響對象的速度，大小和位置。

您甚至可能會注意到，軌道運行物體使用的是真實的燈光，并根據哪一側指向太陽。這令人印象深刻，它在這個列表中排名第一，因為它非常注重細節。

透視框

信不信由你，這個盒子動畫是用純CSS3變換制作的。實際的立方體很容易使用CSS渲染，交替的顏色適用于不同的類。

動畫使用循環關鍵幀動畫來給出這些框在3D空間中彈跳的錯覺。通過單擊右上角的任何透視按鈕，您甚至可以從不同角度查看此3D模型。太酷了！

純CSS3圖

另一個純CSS3動畫的例子是由Ana Tudor創建的條形圖。它使用一個簡單的HTML容器，其中包含四個內部div，表示每個矩形的四個邊。

這些條很容易使用CSS3 制作動畫，它們都會變得不同高度。但最令人印象深刻的部分是整個動畫如何在條形圖增長時旋轉視角。

這使用了大量的Sass代碼來自動化具有計算功能的動畫，因此它有點技術性。但是，如果你想要了解更多有關3D的信息，那么這將是一個可靠的筆。

管視角

對于一個有趣的Webkit瀏覽器體驗，請看一下使用CSS3轉換和Sass屬性創建的3D隧道。

交替的顏色穿過Sass for循環，其在一定時間段之后交替HSL顏色值。這個循環釋放出一種錯覺，即你無限期地穿過彩色五彩紙屑的隧道。太瘋狂了！

它似乎沒什么特別的，對于一個主要網站來說絕對不實用。但它證明了你可以用一些創造力和編碼知識做多少。

CSS中的3D iPhone

iPhone 4提供了一種全新的設計，讓每個人都為這款殺手級新智能手機大肆宣傳。開發人員Jonathan Levaillant一定非常喜歡iPhone 4，因為他用純CSS重新創建了設計。

作為旋轉設備，這個非常酷。它看起來像iPhone，外帶甚至反射具有逼真漸變的光線。iPhone的屏幕播放在Apple的服務器上托管的mp4視頻，它也在視角上正確扭曲。

對此最瘋狂的是它如何完全依賴于CSS。當純CSS3 iPhone在瀏覽器中完全交互時，我將在另外10年內感到很興奮。

3D太陽系

銀河系是我們宇宙中的小角落，它完全由朱利安·加尼爾創造的這支驚人的鋼筆代表。

它確實使用了很多CSS，但大多數可自定義的效果都依賴于JavaScript。這使您可以更改各種行星的速度，大小和距離。

您甚至可以相對輕松地在3D視圖和頭頂2D視圖之間切換。談談前端開發的一流使用！

陰影立方體

這些簡單的陰影立方體可能看起來不多。它們是用CSS構建的，它們使用CSS3動畫在一個軸上自動旋轉。

但是有一個交互式設置，您可以在鼠標懸停時為立方體設置動畫。這絕對是一個很酷的技巧，它依賴于一些罕見的CSS技術，包括:hover和:checked偽類以及tilde(~) selector。

CSS 3D Carousel

這個非常基本的3D輪播依賴于點擊事件來在不同元素之間制作動畫。3D風格非常詳細，完全依賴于CSS代碼。

這里唯一需要的JavaScript是在下一個/上一個按鈕之間切換，并將3D樣式設置為動畫。這實際上是您可以在真實網站上使用的東西，因此它可能在現代網頁設計中具有實際用途。

冷靜獅子

這里的東西有點不太實用，但仍然非常有趣。這款3D獅子由Karim Maaloul 渲染，使用Three.js創造一個有趣的游戲，你可以在汗水的獅子身上吹出一些涼爽的空氣。

當您用光標在頁面上移動風扇時，獅子的注視將隨之而來。然后點擊啟動電動風扇，觀察獅子的興奮，當你發送一股涼爽的空氣流。

開發商甚至開始在獅子的鬃毛中創造撲動區域以及胡須中的運動。

這是3D效果到底有多遠的另一個詳細示例。

3D NES控制器

經典游戲在當前一代編碼器上留下了印記，你可以看到Johan van Tongeren 用純CSS3渲染的3D NES控制器。

它在Chrome / WebKit瀏覽器中效果最好，盡管它在Firefox中也可以很好地呈現。這看起來更像是一個實驗，看看CSS到底有多遠，所以不要指望它是完美的！

我希望這些例子可以激發您更多地了解前端開發，甚至可以創建自己的3D項目。