Introduzione
Per molto tempo il 3D è rimasto appannaggio delle applicazioni desktop. Di recente, con l'introduzione di smartphone avanzati che hanno accesso all'accelerazione GPU nativa, abbiamo iniziato a osservare l'utilizzo del 3D praticamente ovunque.
In genere, il 3D viene utilizzato principalmente come dispositivo per i giochi o per 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 specifica della bozza nel 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 visivo DOM.
La bozza di lavoro della trasformazione 3D di CSS è un'estensione logica del modello di trasformazione 2D di CSS, che introduce alcune proprietà aggiuntive, tra cui le prospettive, le rotazioni e le trasformazioni in uno spazio 3D.
Mai prima d'ora siamo stati in grado di creare interfacce 3D così facilmente. Queste tecnologie hanno abbassato le barriere all'ingresso. Non è più necessario essere esperti di matematica per creare elementi 3D.
Va notato che il modulo CSS 3D è progettato per aiutare gli sviluppatori a creare applicazioni ricche e visivamente interessanti, non per consentirti di creare mondi 3D immersivi.
Supporto del browser e accelerazione hardware
-webkit-perspective
-webkit-transform-3d
La cosa importante da ricordare è che, sebbene un browser possa "supportare" il 3D, potrebbe non essere in grado di eseguire il rendering 3D a causa di limitazioni hardware e dei driver. Le scene 3D basate sul DOM possono essere molto costose dal punto di vista dell'elaborazione e quindi i fornitori di browser hanno deciso invece di rallentare i browser con una soluzione di rendering software puro, ma trarrebbero vantaggio dalla GPU che potrebbe non essere disponibile su tutte le piattaforme.
Rilevamento delle funzionalità
E per quanto riguarda il rilevamento delle funzionalità? Speravo che non ce l'avresti chiesto. Gli sviluppatori utilizzano strumenti come Modernizr per rilevare il supporto di specifiche funzionalità e abilità del browser. Sebbene sia possibile rilevare la presenza di supporto per le trasformazioni 3D, non è possibile rilevarne la presenza di accelerazione hardware, che è l'ingrediente principale.
Esempio di base
Non c'è niente di meglio che lanciarsi subito. In questo esempio applicheremo un insieme di base di rotazioni di un elemento DOM arbitrario.
Iniziamo definendo una prospettiva sull'elemento principale.
<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 da 1 a 1000 producono un effetto molto pronunciato e valori superiori a 1000 in meno. Aggiungiamo quindi un iframe e applichiamo una rotazione di 30 gradi sugli assi Z e Y.
<iframe
src="http://www.html5rocks.com/"
style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>
BAM! Questo è tutto, l'elemento è completamente interattivo e si tratta di un elemento DOM a tutti gli effetti (a eccezione del fatto che ora ha un aspetto ancora più fresco). Se il tuo browser non supporta le trasformazioni 3D, non accadrà nulla. Vedrai solo un iframe semplice senza rotazione applicata. Se il tuo browser supporta le trasformazioni 3D ma senza accelerazione hardware, potrebbe sembrare strano.
Animazione
La cosa che mi piace delle trasformazioni 3D di CSS3 è che si collega perfettamente al modulo Transizione CSS. Le animazioni e le transizioni sono facili da definire in CSS e la loro applicazione a 3D non fa eccezione.
Animare gli elementi a cui è applicata una prospettiva 3D è semplice. È sufficiente impostare lo stile di "transizione" su "trasformazione", collegare una durata e una funzione di animazione. Da quel momento in poi, qualsiasi modifica allo stile di "trasformazione" sarà animata.
Abbiamo riconsiderato gli esempi precedenti per utilizzare gli stili di documento, invece degli stili incorporati. Non solo chiarisce l'esempio, ma permette al campione di sfruttare lo pseudo-selettore :hover. Utilizzando il selettore :hover, è possibile avviare le transizioni semplicemente spostando il mouse sopra l'elemento. Ottimo!
Riepilogo
Questa era solo una rapida occhiata ad alcuni degli effetti interessanti che possono essere applicati a qualsiasi elemento DOM visibile utilizzando le trasformazioni 3D CSS. Ci sono ancora molte cose che si possono fare e che non sono state trattate in questo tutorial.