1 / DI COSA SI PARLA?

3D per ottenere tutto... -Nella nostra professione di UX-Scientist (sviluppatore front-end star di UX 🙂), siamo abituati a lavorare in 2D. Conosciamo bene queste proprietà CSS3 che ti consentono di creare angoli arrotondati, sfumature e altre ombre esterne.
Tuttavia, al di là di questi effetti già interessanti, ci sono transizioni, trasformazioni e animazioni che consentono di fare cose solo in CSS che fino a qualche anno fa erano ancora impossibili.
Queste proprietà sono soprattutto anche proprietà 2D ma il loro utilizzo dà accesso a una terza dimensione per le nostre creazioni.
Puoi fare molte cose in 3D. Per questo articolo ho scelto di puntare sulla geometria pura, perché mi entusiasma...
Ecco una presentazione abbastanza generale dell'argomento. Presto pubblicherò un tutorial più completo per imparare a creare una forma 3D.

Queste proprietà esistono quindi dal 2009 e sono state implementate per la prima volta dal team Safari/Webkit.
[tipo separatore=”” size=”” icon=”stella”]

2 POSSIBILITA'

– Transizioni: con le transizioni potremo giocare con colori, sfumature, ombre, lunghezze e cambi di stato...
– Trasformazioni: con le trasformazioni effettueremo trasformazioni nello spazio, rotazioni ad esempio.
– Animazioni: e con le animazioni animeremo (grazie mister ovvio) i due effetti precedenti
Questi effetti possono essere combinati a piacimento per crearne di più elaborati.
[tipo separatore=”” size=”” icon=”stella”]

3 / PRESTAZIONI

Le animazioni realizzate in CSS3 sono estremamente fluide e facili da implementare. Tutto viene eseguito dal lato client, il che significa che il browser esegue i calcoli (senza l'aiuto di un server, cosa quasi impossibile 1 anno fa).
Non c'è nemmeno bisogno di javascript. È davvero bello poter ottenere tali effetti senza scrivere script.
[tipo separatore=”” size=”” icon=”stella”]

4 / COME FUNZIONA

Le trasformazioni 3D si basano sulle stesse proprietà delle trasformazioni 2D. 'trasformare' in questo caso.
Sono necessarie altre proprietà per ottenere l'effetto 3D, come ad esempio: 'prospettiva', 'traduci', 'ruota'.
– La prospettiva corrisponde al punto di fuga. Rappresenta la distanza tra la telecamera e la scena (l'utente Internet e lo schermo). Senza prospettiva, la stampa 3D non esiste.
Sono rappresentati anche i tre angoli (X,Y,Z):
– translateZ allontana l'elemento dal centro della forma 3D,
– translateX sposta l'elemento sull'asse orizzontale,
– traslaY sposta l'elemento sull'asse verticale.
– rotateX ruota l'elemento sul suo asse orizzontale centrale,
– rotateY ruota l'elemento sul suo asse centrale verticale.

[tipo separatore=”” size=”” icon=”stella”]

6 / COMPATIBILITÀ

Potrai visualizzare tali effetti con Safari, Chrome, Firefox e Internet Explorer 10.
Supporto browser su w3c School
Tuttavia, a volte sarà necessario utilizzare i prefissi del fornitore:
-o- per l'Opera
-moz- per Gecko (Mozilla)
-webkit- per Webkit (Chrome, Safari, Android...)
-ms- per Microsoft (Internet Explorer)
I prefissi del fornitore sono necessari fino al completamento della specifica W3C del modulo Trasformazioni 3D.
Per consentire il progressivo sviluppo e implementazione dei moduli CSS, i fornitori di browser hanno la possibilità di introdurre il supporto per proprietà specifiche. Questo modo di operare è consigliato dal W3C a partire dai CSS 2.1 e valido per le versioni successive. Per evitare di riempire i nostri file con regole prefissate, potremo utilizzare SASS o LESS che ci permetteranno di renderlo generico.

[tipo separatore=”” size=”” icon=”stella”]

8 / ESEMPI

Infine, ecco alcuni link per darvi esempi di cosa è possibile ottenere nella geometria 3D, con il lavoro di Julien Knebel, o anche di Ana Tudor, il mio idolo in questo campo.
Julien Knebel su Codepen
Ana Tudor su Codepen
Ancora Ana Tudor su Codepen
E infine, un'applicazione che ho scoperto da poco, e che forse presto sarà oggetto di un altro articolo tridiv.com
È un'applicazione che ti permette di creare forme 3D da CSS3. Sembra davvero ben fatta. Da provare quindi (non compatibile con Firefox).
Emmanuelle GUYOT / UX-Scienziata

---