CSS3 Rotazione 3D di un elemento HTML

15 mar , 2014

Il CSS3 ha rivoluzionato il web permettendo quello che prima si poteva fare solamente con una buona programmazione in Javascript. In questo articolo vi mostrerò come è possibile creare un animazione di rotazione 3D con il CSS3 al passaggio del mouse sopra un elemento senza l’utilizzo di Flash o Javascript.

DEMO

Animare gli elementi in CSS3

Creare animazioni è facilissimo e bastano pochissime righe di codice, ciò che attualmente annoia è la compatibilità dei browser, infatti non tutti i browser rispettano gli standard del CSS3. In questo progetto spiegherò come è possibile creare un animazione in CSS3 cross-browser, ossia compatibile con tutti i browser moderni, tramite l’inserimento di alcuni prefissi.

transform e transition

I 2 comandi che renderanno possibile l’animazione saranno transform e transition. Il primo ci permetterà di trasformare l’elemento e in questo caso di ruotarlo del numero di gradi da noi desiderato.

transform: perspective( 600px ) rotateY( 180deg );

Transform può assumere molteplici proprietà, in questo caso noi utilizzeremo 2 proprietà: perspective che ci permette di creare una sorta di prospettiva in 3D modificabile tramite la variazione dei pixel contenuti all’interno delle parentesi; la seconda proprietà è rotateY che ci permette di scegliere quale tipo di rotazione e il numero di gradi da effettuare, nel nostro esempio scegliamo di ruota l’elemento sull’asse Y (rotazione orizzontale) di 180 gradi.

transition: transform .5s linear 0s;

Transition ci permette di creare una animazione dinamica, anche questa può far variare le sue proprietà, in questo esempio sono 4: la prima indirizza l’animazione ad un elemento specifico (transform indica di dare l’effetto a tutti gli elementi che utilizzano quello stile) la seconda è la durata in secondi dell’animazione, la terza è il tipo di dinamica dell’effetto (ossia il timing) e l’ultima è il delay di partenza dell’effetto cioè quanti secondi passano prima di far partire l’animazione.

Il codice

Ecco quindi il codice commentato:

< !DOCTYPE html>
<html>
<head>
<title>Rotazione 3D di un elemento HTML</title>
<style type="text/css">
/* CREA UNO STILE PER TUTTI GLI ELEMENTI */
.rotazione3D{ 
	width:300px;
	height:300px;
	margin:10px;
	float:left;
}
 
/* CREA UNO STILE PER LA FACCIATA FRONTALE DELL'ELEMENTO*/
.rotazione3D > .fronte{
	background: #F10; 
	width:300px;
	height:300px;
 
	position:absolute;
        /* RUOTA O RIPORTA A 0 GRADI L'ELEMENTO */
	transform: perspective( 600px ) rotateY( 0deg );
        /* NASCONTI IL RETRO */
	backface-visibility: hidden;
        /* DEFINISCI L'ANIMAZIONE */
	transition: transform .5s linear 0s;
}
 
/* FAI LO STESSO PER IL RETRO */
.rotazione3D > .retro{
	background: #FC0; 
	width:300px;
	height:300px;
 
	position:absolute;
        /* RUOTA A 180 GRADI L'ELEMENTO */
	transform: perspective( 600px ) rotateY( 180deg );
	backface-visibility: hidden;
	transition: transform .5s linear 0s;
}
 
/* CREA L'ANIMAZIONE AL PASSAGGIO DEL MOUSE CON :HOVER */
.rotazione3D:hover > .fronte{
	transform: perspective( 600px ) rotateY( -180deg );
}
.rotazione3D:hover > .retro{
	transform: perspective( 600px ) rotateY( -0deg );
}
 
</style>
</head>
<body>
<h1>CSS3: Rotazione 3D di un elemento HTML</h1>
<section class="rotazione3D">
	<div class="retro">Elemento 1 - RETRO</div>
	<div class="fronte">Elemento 1 - FRONTE</div>
</section>
<section class="rotazione3D">
	<div class="retro">Elemento 2 - RETRO</div>
	<div class="fronte">Elemento 2 - FRONTE</div>
</section>
<section class="rotazione3D">
	<div class="retro">Elemento 3 - RETRO</div>
	<div class="fronte">Elemento 3 - FRONTE</div>
</section>
</body>
</html>

Questo codice funziona solamente con le ultime versioni di Firefox, presto anche gli altri browsers rispetteranno gli standard ma per ora per permettere la compatibilità bisogna inserire alcuni prefissi, questi sono -webkit-, -o- e -ms-. Vediamo quindi con un esempio:

-webkit-transform: perspective( 600px ) rotateY( 0deg );
 -o-transform: perspective( 600px ) rotateY( 0deg );
 -ms-transform: perspective( 600px ) rotateY( 0deg );
 transform: perspective( 600px ) rotateY( 0deg );
 -webkit-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 backface-visibility: hidden;
 transition: -webkit-transform .5s linear 0s;
 transition: -o-transform .5s linear 0s;
 transition: -ms-transform .5s linear 0s;
 transition: transform .5s linear 0s;

Con l’inserimento dei prefissi abbiamo permesso il riconoscimento dei vari comandi da parte dei vari motori di rendering di Safari e Chrome (webkit), Opera (o) e delle ultime versioni di Internet Explorer (ms).

Nota importante è il comando backface-visibility: hidden; che ci permette di nascondere la facciata non visibile dell’elemento. Anche essa ha bisogno dei prefissi.

Il css3 ci permette in maniera facile di creare delle stupende animazioni, potete ad esempio integrare questa rotazione 3D al vostro portfolio o al vostro menù di login o registrazione. Fatemi se vi è stata utile e come la avete utilizzata!

CSS3, HTML

Geckozone