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

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

Web Designer Toolbox 
Unlimited下載:500,000多個Web模板,主題,插件和設計資產

現在下載

 

開普勒軌道

 

我無法想象建立這個開普勒軌道路徑的現實模型需要多長時間。這個模型顯示了一個身體相對于另一個身體在太空中的運動,在這種情況下,開發人員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

圖像輪播非常適合展示圖形,照片甚至是旋轉視頻。通過這個CSS3旋轉木馬,您可以將這些有趣的滑塊帶到一個全新的水平。

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

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

冷靜獅子

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

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

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

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

3D NES控制器

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

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

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