Quando, navigando su internet, ci si imbatte in una animazione 3D piuttosto complessa e il nostro spirito da esploratore del web ci spinge a fare click con il pulsante destro del mouse su di essa per capire se è realizzata in Flash, il nostro acume di web developer, in realtà, ci fa intuire che non potrebbe essere altrimenti.
In effetti le alternative non sono molte: Javascript, Canvas e poco altro. E se dicessi CSS? Ebbene sì, come abbiamo già analizzato qualche settimana fa, esistono alcune proprietà CSS che ci permettono di gestire animazioni e trasformazioni agli elementi di una pagina web (animazioni solo per WebKit).
I CSS anche per il 3D?
Sì, anche per il 3D. Mettiamo subito le cose in chiaro, però! Le proprietà che stiamo per analizzare sono disponibili, mentre sto scrivendo, solo per i browser con motore WebKit. Voglio accettare la sfida allora, oggi realizziamo una animazione 3D con CSS: prepariamo un banner che, tridimensionalmente, gira attorno al proprio asse.
Le animazioni 3D possono essere gestite, come per quelle 2D, dalla proprietà -webkit-transform che può essere valorizzata in modi differenti:
- translate3d(x,y,z), translateZ(z)
La prima funzione sposta 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 X e 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.
Esempio pratico di animazione 3D con CSS e WebKit
Come anticipavo, voglio creare un banner tridimensionale che ruoti attorno ad un vettore a metà tra l’asse delle X e quella delle Y.
Vediamo l’esempio (per Chrome e Safari):
[iframe src=”//jsfiddle.net/YKTrd/2/embedded/”]
Il codice HTML è molto semplice. Nel CSS, invece, possiamo subito notare, in alto, la definizione del keyframe con gli step che compongono l’animazione. La funzione -webkit-transform viene valorizzata da rotate3d che riceve i valori del vettore attorno al quale operare l’animazione (1, 1, 0) e l’angolo (prima di 180° e poi di 360°).
Tra le altre regole diamo risalto alla proprietà -webkit-animation: spin 3s infinite ease-out; che utilizziamo per impostare l’utilizzazione dell’animazione definita con il keyframe spin.
Concludendo
Possiamo immaginare un utilizzo futuristico per banner pubblicitari e animazioni 3D 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 queste regole CSS molto interessanti.
