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

Lascia che Artera
ti apra gli occhi.

Scopri la qualità del nostro servizio.

Garanzia soddisfatti o rimborsati

60 giorni

Migrazione e ottimizzazione

gratuite

Il miglior modo di iniziare, è provare

Registrati ora: è gratuito e senza impegni