Trasformazioni tridimensionali degli elementi html in una pagina web, grazie al CSS3

Una nuova caratteristica delle specifiche del CSS3 riguarda la sua abilità nel trasformare elementi della pagina web in 3D. L’argomento è abbastanza ampio, ma vediamo subito un esempio per addentrarci nelle nuove specifiche.
Cerchiamo di ruotare tridimensionalmente un DIV a forma di ellisse:

<div class=”contenitore”>
	<div class=”ellisse”><p>Fronte</p></div>
</div>

Quindi vi sono 2 elementi principali: un box contenitore e un box contenuto, quest’ultimo rappresenta la forma ellittica mentre il contenitore verrà modificato per l’animazione 3D. Vediamo il codice CSS che c’interessa:

.contenitore {
	perspective: 700;
	text-decoration: none;
	transform-style: preserve-3d;
}
.ellisse {
	transition: transform 1s linear;
}
 
.rotazione {
	transform: rotateY(180deg);
}

All’elemento “contenitore” viene applicata una prospettiva di 700, in questo modo si comunica al browser la profondità di tale prospettiva, quest’ultima infatti determina l’intensità dell’effetto 3D, la si puà immaginare come la distanza fra l’osservatore e l’oggetto:
maggiore è il valore e quindi maggiore è la distanza, meno intenso è l’effetto visuale, poichè essendo più lontani vedremmo l’oggetto più schiacciato (delle delle stesse dimensioni, ma con una distanza trimendionale delle linee o superfici più schiacciata).
Mentre valori bassi di prospettiva producono effetti tridimensionali enormi, subendo la stessa percezione visiva di un oggetto massiccio da parte di un piccolo insetto.
Ritornando al nostro esempio, il contenitore presenta anche la proprietà “transform-style” settata su “preserve-3d”, in questo modo si comunica al browser che la stessa prospettiva deve essere trasferita agli elementi figli interni (in questo caso il DIV con classe ellisse), in modo da sovrascrivere il valore di default “flat” che rappresenta lo spazio bidimensionale standard per l’html.
Dopo aggiungiamo una rotazione sull’asse delle Y dell’ellisse con animazione. La rotazione viene settata all’interno di una separata regola CSS e possiamo usare lo javascript per effettuare l’animazione.
In questo modo, grazie all’integrazione fra javascript e CSS3, riusciamo a creare un effetto e una animazione tridimensionale molto interessante a livello visivo.

Condividi questo articolo su:

Facebook Twitter Linkedin Digg Email

Leave a Comment

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">


4 × = venti otto