Ottenere effetti 3D sulle nostre pagine web, fino ad oggi, è stato sempre parecchio complicato, richiedendo plugin esterni come Flash o soluzioni complessi come WebGL. Vediamo invece come è possibile usare CSS per ottenere fantastici effetti 3D con pochissimo sforzo.

In particolare, vogliamo evidenziare qui alcuni spunti di partenza per indicarvi poi l'approfondimento sull'ottimo tutorial di David DeSandro che trovate su http://desandro.github.com/3dtransforms/

Trasformazioni 3D

Partiamo dalle funzioni di trasformazione in 3D. Come per quelle in 2D, la sintassi e l'utilizzo è piuttosto semplice. Le funzioni sono:

rotateX( angle )<br />    rotateY( angle )<br />    rotateZ( angle )<br />    translateZ( tz )<br />    scaleZ( sz )

Rispetto alle funzioni 2D, come vedete l'aggiunta principale sono le funzioni per la gestione dell'asse Z, ovvero quello della profondità:

Ci sono poi delle comode "scorciatoie", cioè funzioni che in un'unica chiama intervengono su tutti e 3 gli assi:

translate3d( tx, ty, tz )<br />    scale3d( sx, sy, sz )<br />    rotate3d( rx, ry, rz, angle )

Il vantaggio addizionale di queste funzioni "3d" è di utilizzare, su Safari, l'accellerazione hardware e dunque di rendere più fluide e scorrevoli le nostre animazioni.

Un carousel

Come detto, vi invitiamo a studiare l'ottimo tutorial http://desandro.github.com/3dtransforms/ per approfondire tutti gli aspetti di questa fantastica tecnica. Per ingolosirvi un po', vogliamo solo mostrarvi che cosa è possibile realizzare solo con CSS e un po' di JavaScript (cliccate sull'immagine qui sotto per il demo):

Bello eh? 😉 Rieccovi il link: http://desandro.github.com/3dtransforms/

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis