CSS e animazioni 3D

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.

Condividi