10 straordinari progetti 3D realizzati interamente con CSS e JavaScript

Il Web ha fatto molta strada da Internet dial-up e dalle pagine GeoCities. I siti Web sono ora completamente reattivi e accessibili da dispositivi touchscreen. Ma i browser moderni hanno portato le cose ancora oltre il web design "mainstream".

È possibile creare incredibili effetti 3D nel browser utilizzando solo tecnologie frontend. E in questo post, mostrerò i miei progetti Web 3D preferiti che mostrano fino a che punto è arrivato il Web in pochi decenni.

Scatole prospettiche

Che ci crediate o no, questa animazione della scatola è stata realizzata con trasformazioni CSS3 pure. I cubi effettivi sono abbastanza facili da renderizzare usando CSS e i colori alternati funzionano con classi diverse.

L'animazione utilizza animazioni di fotogrammi chiave in loop per dare l'illusione di queste scatole che rimbalzano nello spazio 3D. Facendo clic su uno qualsiasi dei pulsanti prospettici nell'angolo in alto a destra puoi persino visualizzare questo modello 3D da diverse angolazioni. Abbastanza bello!

Grafico CSS3 puro

Un altro esempio di pura animazione CSS3 è questo grafico a barre creato da Ana Tudor. Utilizza un semplice contenitore HTML con quattro div interni che rappresentano i quattro lati di ciascun rettangolo.

Le barre sono abbastanza facili da animare usando CSS3 e crescono tutte a diverse altezze. Ma la parte più impressionante è come l'intera animazione ruota gli angoli di visualizzazione anche mentre il grafico a barre è in crescita.

Questo utilizza molto codice Sass per automatizzare le animazioni con funzioni di calcolo, quindi è un po' tecnico. Ma se stai cercando di saperne di più sul 3D, questa è una penna solida in cui immergerti.

Visione a tunnel

Per un'esperienza da brivido con il browser Webkit, dai un'occhiata a questo tunnel 3D creato con solo alcune trasformazioni CSS3 e proprietà Sass.

I colori alternati attraversano un ciclo Sass for che alterna il valore del colore HSL dopo un certo periodo di tempo. Questo loop dà l'illusione di viaggiare indefinitamente attraverso un tunnel di coriandoli colorati. Abbastanza selvaggio!

Potrebbe non sembrare niente di speciale e sicuramente non è pratico per un sito Web importante. Ma è una testimonianza di quanto puoi fare con un po' di creatività e conoscenza della programmazione.

iPhone 3D in CSS

L'iPhone 4 ha offerto un design radicalmente nuovo e ha entusiasmato tutti per il nuovo smartphone killer. Lo sviluppatore Jonathan Levaillant deve aver apprezzato molto l'iPhone 4 da quando ha ricreato il design in puro CSS.

Dato che i dispositivi rotanti funzionano, questo è dannatamente bello. Sembra un iPhone e la fascia esterna riflette anche la luce con un gradiente realistico. Lo schermo dell'iPhone riproduce un video mp4 ospitato sui server Apple e si distorce correttamente anche in prospettiva.

La cosa più folle di questo è il modo in cui si basa esclusivamente sui CSS per tutto. Sarò entusiasta tra altri 10 anni quando gli iPhone CSS3 puri saranno completamente interattivi nel browser.

Sistema solare 3D

La Via Lattea è il nostro piccolo angolo dell'universo ed è pienamente rappresentata in questa fantastica penna creata da Julian Garnier.

Utilizza molti CSS, ma la maggior parte degli effetti personalizzabili si basa su JavaScript. Ciò ti consente di modificare la velocità, le dimensioni e la distanza di vari pianeti.

Puoi persino passare dalla vista 3D a una vista 2D dall'alto con relativa facilità. Parla di un uso stellare dello sviluppo del frontend!

Cubi ombreggiati

Questi semplici cubi ombreggiati potrebbero non sembrare molto. Sono costruiti in CSS e ruotano automaticamente su un asse usando le animazioni CSS3.

Ma c'è un'impostazione interattiva in cui puoi animare i cubi al passaggio del mouse. Questo è sicuramente un trucco interessante e si basa su alcune rare tecniche CSS tra cui le pseudo-classi :hover e :checked insieme al tilde(~) selector .

Carosello 3D CSS

I caroselli di immagini sono ottimi per mostrare grafica, foto e persino video a rotazione. E con questo carosello CSS3 puoi portare questi divertenti slider a un livello completamente nuovo.

Questo carosello 3D molto semplice si basa su eventi di clic per animare tra diversi elementi. Lo stile 3D è sorprendentemente dettagliato e si basa esclusivamente sul codice CSS.

L'unico JavaScript necessario qui è alternare tra i pulsanti Next/Prev e animare gli stili 3D in posizione. E questo è in realtà qualcosa che potresti usare su un sito reale, quindi potrebbe avere un uso pratico nel moderno web design.

Raffredda il leone

Ecco qualcosa di un po' meno pratico ma comunque incredibilmente divertente da usare. Questo rendering di leone 3D di Karim Maaloul utilizza Three.js per creare un gioco divertente in cui puoi soffiare un po' d'aria fresca sul leone sudato.

Mentre sposti il ​​ventaglio sulla pagina con il cursore, lo sguardo del leone seguirà. Quindi fai clic per avviare la ventola motorizzata e osserva l'eccitazione del leone mentre gli invii un fresco flusso d'aria.

Lo sviluppatore è arrivato persino a creare aree di sbattimento nella criniera del leone insieme al movimento nei baffi.

Questo è un altro esempio dettagliato di quanto siano arrivati ​​gli effetti 3D.

Controller 3D NES

I giochi classici hanno lasciato il segno sull'attuale generazione di programmatori e puoi vederlo con il controller NES 3D di Johan van Tongeren reso in puro CSS3.

Funziona meglio nei browser Chrome/WebKit, anche se dovrebbe essere visualizzato bene anche in Firefox. È davvero più un esperimento per vedere fino a che punto è arrivato il CSS, quindi non aspettarti che sia perfetto!

Orbite di Keplero

Non riesco a immaginare quanto tempo ci sia voluto per costruire questo modello realistico di un percorso orbitale di Keplero. Questo modello mostra il movimento di un corpo rispetto a un altro nello spazio, e in questo caso lo sviluppatore Danie Clawson ha fatto un lavoro incredibile.

L'intero modello utilizza CSS per le immagini e Three.js per gli effetti 3D. Nell'angolo in alto a sinistra troverai una casella delle opzioni in cui puoi modificare molte delle variabili dell'orbita per influenzare la velocità, le dimensioni e il posizionamento dell'oggetto.

Potresti anche notare che l'oggetto orbitante utilizza una luce realistica con un'ombreggiatura basata su quale lato punta verso il sole. Questo è incredibilmente impressionante e appartiene al numero 1 in questa lista per l'immensa attenzione ai dettagli.

Spero che questi esempi possano ispirarti a saperne di più sullo sviluppo del frontend e forse anche a creare i tuoi progetti 3D.