3D e CSS

Paul Kinlan

Introduzione

Per molto tempo, il 3D è stato appannaggio delle applicazioni desktop. Di recente, con l'introduzione di smartphone avanzati che hanno accesso all'accelerazione GPU nativa, abbiamo iniziato a notare l'utilizzo del 3D praticamente ovunque.

In genere, il 3D viene utilizzato principalmente come dispositivo per i giochi o alcune interfacce utente avanzate. Solo con l'introduzione delle trasformazioni di Perspective in WPF e Silverlight, un modello adatto per l'applicazione di effetti 3D agli elementi dell'interfaccia utente è diventato una soluzione pratica per gli sviluppatori di applicazioni (dopo tutto, il 3D non è esattamente facile).

Il modello di trasformazione 3D CSS è stato introdotto come bozza di specifica a marzo 2009 per consentire agli sviluppatori web di creare interfacce utente interessanti e accattivanti che sfruttano il 3D consentendo agli autori di applicazioni di applicare trasformazioni prospettiche 3D a qualsiasi elemento DOM visivo.

La bozza di lavoro della trasformazione 3D CSS è un'estensione logica del modello di trasformazione 2D CSS, che introduce alcune proprietà aggiuntive, tra cui prospettive, rotazioni e trasformazioni in uno spazio 3D.

Non è mai stato così facile creare interfacce 3D. Queste tecnologie hanno abbassato le barriere all'accesso. Non è più necessario essere un genio della matematica per creare elementi 3D.

È necessario notare che il modulo CSS 3D è progettato per aiutare gli sviluppatori a creare applicazioni ricche e visivamente interessanti, non per consentire di creare mondi 3D immersivi.

Supporto del browser e accelerazione hardware

-webkit-perspective

-webkit-transform-3d

L'informazione importante da ricordare è che, anche se un browser può "supportare" il 3D, potrebbe non essere in grado di eseguire il rendering del 3D a causa di limitazioni dell'hardware e dei driver. Le scene 3D basate sul DOM possono essere molto dispendiose in termini di risorse di calcolo e, pertanto, i fornitori di browser hanno deciso di utilizzare la GPU anziché rallentare i browser con una soluzione di rendering puramente software, che potrebbe non essere disponibile su tutte le piattaforme.

Rilevamento di elementi

E il rilevamento delle funzionalità? Speravo che non me lo chiedessi. Gli sviluppatori utilizzano strumenti come Modernizr per rilevare il supporto di funzionalità e capacità specifiche del browser. Sebbene sia possibile rilevare la presenza del supporto per le trasformazioni 3D, non è possibile rilevare la presenza dell'accelerazione hardware, che è l'ingrediente chiave.

Esempio di base

Non c'è niente di meglio che mettersi subito al lavoro. In questo esempio applicheremo un insieme di base di rotazioni di un elemento DOM arbitrario.

Iniziamo definendo una prospettiva sull'elemento radice.

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">

La prospettiva è importante perché definisce il modo in cui viene visualizzata la profondità della scena 3D. I valori compresi tra 1 e 1000 produrranno un effetto molto pronunciato, mentre i valori superiori a 1000 meno. Aggiungiamo quindi un iframe e applichiamo una rotazione di 30 gradi attorno agli assi Z e Y

<iframe
    src="http://www.html5rocks.com/"
    style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>

BAM! Ecco fatto, l'elemento è completamente interattivo e sotto tutti gli aspetti è un elemento DOM a tutti gli effetti (tranne che ora sembra ancora più fresco). Se il browser non supporta le trasformazioni 3D, non succederà nulla. Vedrai solo un semplice iframe senza rotazione applicata. Se il browser supporta le trasformazioni 3D, ma senza accelerazione hardware, l'effetto potrebbe risultare un po' strano.

Animazione

La cosa che adoro delle trasformazioni 3D di CSS3 è che si integrano perfettamente con il modulo di transizione CSS. Le animazioni e le transizioni sono facili da definire in CSS e l'applicazione al 3D non fa eccezione.

Animare elementi a cui è stata applicata una prospettiva 3D è semplice. Basta impostare lo stile "transition" su "transform", associare una durata e una funzione di animazione. Da quel momento in poi, qualsiasi modifica allo stile "trasformazione" verrà animata.

Abbiamo ristrutturato gli esempi precedenti in modo da utilizzare gli stili di documento anziché gli stili in linea. Non solo chiarisce l'esempio, ma consente al sample di sfruttare lo pseudo selettore :hover. Utilizzando il selettore :hover, le transizioni possono essere avviate semplicemente passando il mouse sopra l'elemento. Ottimo!

Riepilogo

Questa è solo una rapida panoramica di alcuni degli effetti interessanti che possono essere applicati a qualsiasi elemento DOM visibile utilizzando le trasformazioni 3D CSS. Esistono ancora molte cose che è possibile fare e che non sono state trattate in questo tutorial.