完全使用 CSS 和 JavaScript 構建的 10 個令人驚嘆的 3D 項目

從撥號互聯網和 GeoCities 頁面開始，Web 已經有了很長的路要走。 網站現在完全響應並可從觸摸屏設備訪問。 但是現代瀏覽器已經超越了“主流”網頁設計。

僅使用前端技術就可以在瀏覽器中創建令人驚嘆的 3D 效果。 在這篇文章中，我將展示我最喜歡的 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 的屏幕播放蘋果服務器上託管的 mp4 視頻，而且它的透視圖也正確失真。

最瘋狂的是它如何完全依賴 CSS 來處理所有事情。 再過 10 年，當純 CSS3 iPhone 在瀏覽器中完全交互時，我會很興奮。

3D 太陽系

銀河係是我們宇宙的一個小角落，它在這支由 Julian Garnier 創造的神奇筆中得到了充分體現。

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

您甚至可以相對輕鬆地在 3D 視圖和俯視 2D 視圖之間切換。 談論前端開發的出色用途！

陰影立方體

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

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

CSS 3D 輪播

圖像輪播非常適合輪流展示圖形、照片甚至視頻。 通過這個 CSS3 輪播，您可以將這些有趣的滑塊提升到一個全新的水平。

這個非常基本的 3D 輪播依賴於點擊事件在不同元素之間進行動畫處理。 3D 樣式非常詳細，完全依賴於 CSS 代碼。

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

讓獅子冷靜下來

這是一些不太實用但使用起來仍然非常有趣的東西。 這個由 Karim Maaloul 製作的 3D 獅子渲染使用 Three.js 創建一個有趣的遊戲，您可以在其中向汗流浹背的獅子吹一些涼氣。

當您用光標在頁面上移動扇形時，獅子的目光將跟隨。 然後只需單擊即可啟動電動風扇，並在您向獅子送出涼爽的氣流時觀看獅子的興奮。

開發人員甚至在獅子的鬃毛中創造了拍動區域以及鬍鬚的運動。

這是另一個詳細的例子，說明 3D 效果有多遠。

3D NES 控制器

經典遊戲在當前一代的編碼器中留下了印記，您可以通過 Johan van Tongeren 的純 CSS3 渲染的 3D NES 控制器看到這一點。

它在 Chrome/WebKit 瀏覽器中效果最好，儘管它在 Firefox 中也應該可以很好地呈現。 這更像是一個實驗，看看 CSS 已經走了多遠，所以不要指望它是完美的！

開普勒軌道

我無法想像建立這個開普勒軌道路徑的現實模型需要多長時間。 該模型顯示了一個物體在空間中相對於另一個物體的運動，在這種情況下，開發人員 Danie Clawson 做得非常出色。

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

您甚至可能會注意到，軌道物體使用逼真的光線，並根據哪一側指向太陽進行著色。 這是非常令人印象深刻的，並且由於對細節的極大關注而在此列表中排名第一。

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