Lo sviluppo e l'evoluzione dei browser web come Safari, Chrome e Firefox ha dato agli sviluppatori web ed ai web designers, l'opportunitá di sbizzarrirsi con la creazione di effetti bellissimi, semplicemente usando il CSS3 senza bisogno di javascript, ottenendo risultati favolosi.
Le animazioni 3d possono essere gestite, come per quelle 2d, dalla proprietà -webkit-transform che può essere manipolata in modi differenti:
-
translate3d(x,y,z), translateZ(z)
La prima funzione trasla l’elemento su un piano tridimensionale in base ai parametri indicati, mentre la seconda funzione solo per l’asse Z. Il valore di Z, diversamente da Xe Y non può essere una percentuale. -
scale3d(x,y,z), scaleZ(z)
Analogamente alle due precedenti, le funzioni scale ridimensionano l’elemento in base ai parametri indicati. -
rotateX(angolo), rotateY(angolo), rotate3d(x,y,z,angolo)
Le prime due funzioni ruotano semplicemente l’elemento sulle assi orizzontale e verticale. L’angolo può essere indicato in gradi (°), radianti (rad), o gradienti (grad). L’ultima funzione permette di ruotare tridimensionalmente l’elemento indicando, tramite X, Y e Z un vettore immaginario che sia l’asse di rotazione e l’angolo corrispondente. rotate3d è la funzione che utilizzeremo oggi. -
perspective(p)
Questa funzione ci permette di impostare una prospettiva dalla quale visualizzare l’animazione.
Possiamo immaginare un utilizzo molto futuristico per immagini, banner ed animazioni mozzafiato con le quali rendere molto molto appariscenti le nostre pagine web.
Stiamo a vedere come procederà l’aggiornamento dei motori dei browser web che ora non supportano tutte le nuove regole CSS.
Nel frattempo vi lasciamo con una lista di 15 esempi di trasformazioni 3D con CSS
1. 3D Rotating Molecules on the iPhone/iPad
2. Beercamp 2011
3. Panic — Transmit
4. Reeder for Mac
5. BigText
6. Wonder Webkit
7. The Matrix Revolutions
8. CSS3 Time Machine
9. Flux
10. Photo Transitions
11. VR
12. A 3D FPS concept
13. Natural object-rotation
14. 3D cube
15. Understanding CSS 3D transforms
