Nel tutorial di oggi andiamo a vedere come sfruttare le potenzialità della proprietà css3 chiamata “perspective”, per realizzare una carta a due facce che mostri fronte e retro al passaggio del mouse.

Demo rotazione 3D

Nota per sviluppo su smartphone e tablet

In questo esempio, volutamente semplice, il flip avviene solamente al passaggio del mouse. Laddove vogliate mostrare il “flip” anche su smartphone e tablet, dovremo innanzitutto ricorrere  ad una libreria javascript per gestire i gesti (per esempio Hammer.js) e utilizzare una classe CSS che abbia le stesse proprietà che al momento ha :hover. Semplicemente dovremo far sì che all’attivarsi della funzione corrispettiva venga assegnata o meno la proprietà. In questo modo il passaggio dello stato da attivo a non attivo si mostrerà con la rotazione della carta.

Il codice html

Addentriamoci ora nell’analisi del codice che serve per realizzare il nostro esempio. Lato HTML avremo ben poco. Di fatto ci serviranno un div contenitore globale, un div che simuli la “scatola 3D” in cui ci si muove e che contenga rispettivamente le i di 2 div equivalenti del fronte e retro. NB: nel sorgente dell’esempio troverete anche un semplice preloader usato per pre-caricare le immagini ma non è necessario al fine della nostra spiegazione.

<div class="flip-container">
	<div class="flipper">
		<div class="front"><img src="retro-carta.jpg" width="321" height="449"> </div>
		<div class="back"><img src="fante-di-quadri.jpg" width="321" height="449"></div>
	</div>
</div>

CSS: la magia della rotazione 3D avviene qui

Prendiamo in considerazione pezzo pezzo le parti fondamentali del codice CSS3 utilizzato per creare e far ruotare la nostra carta da gioco. Dicevamo prima che abbiamo necessario di un contenitore globale. Nel nostro caso rappresentato dalla classe “flip-container”.

.flip-container {
	-webkit-perspective: 800;
	-moz-perspective: 800;
	-ms-perspective: 800;
	perspective: 800;
	margin:0 auto;
}

E’ proprio a questo che andremo ad assegnare la proprietà perspective. (Ricordo, trattandosi di proprietà nuove di controllare sempre che lo standard non sia variato nel tempo.) Essa rappresenta l’inclinazione prospettica che subiranno gli elementi che ruoteranno al suo interno. Il valore minimo è “0”. Valori maggiori indicano una distorsione prospettica maggiore. Quindi, come abbiamo appena detto, assegniamo la rotazione 3d di 180° della scatola (.flipper) al mouseover, tramite l’utilizzo della trasformazione css3 chiamata rotateY:

.flip-container:hover .flipper,
.flip-container.hover .flipper {
	-moz-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

Assegniamo quindi al contenitore globale e a quelli delle 2 facce le medesime dimensioni:

.flip-container,
.front,
.back {
	width: 321px;
	height: 449px;
}

A questo punto entrano in gioco le altre proprietà magiche dei CSS3. In particolare dichiariamo finalmente che flipper sarà la nostra scatola 3d usando la proprietà preserve-3d. Impostiamo quindi la velocità con cui avverrà la transizione da una superficie all’altra in termini di secondi. Dichiariamo quindi di voler nascondere l’una o l’altra faccia durante la rotazione della carta dichiarando backface-visibility:hidden. Riassumendo quindi:

.flipper {
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	-ms-transition: 0.6s;
	transition: 0.6s;
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: relative;
}

.front,
.back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	background:none;
}

Abbiamo praticamente finito. Ci resta da nascondere la faccia non visibile inizialmente dalla carta “ruotandola” di 180°:

.back {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
	box-shadow:0 0 40px rgba(0,0,0,0.2);
}

Riassumendo quindi tutto il codice CSS utile:

.flip-container {
	/* Rappresenta l'inclinazione prospettica, in questo caso della rotazione */
	-webkit-perspective: 800;
	-moz-perspective: 800;
	-ms-perspective: 800;
	perspective: 800;
	margin:0 auto;
}
/* ruota il pannello al mousehover */
.flip-container:hover .flipper,
.flip-container.hover .flipper {
	-moz-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
	width: 321px;
	height: 449px;
}
/* impostare velocità di transizione */
.flipper {
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	-ms-transition: 0.6s;
	transition: 0.6s;
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: relative;
}
/* nasconde il retro durante lo swap */
.front,
.back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	background:none;
}
/* front pane, placed above back, quello con lo z-index + alto, anche se sta prima nel codice, finisce sopra */
.front {
	z-index: 2;
	box-shadow:0 0 50px rgba(0,0,0,0.3);
}
/* back, initially hidden pane */
.back {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
	box-shadow:0 0 40px rgba(0,0,0,0.2);
}

Come si può capire dall’analisi complessiva del processo, si tratta fondamentalmente di far ruotare le singole facce delle carta. Solamente che queste facce vengono appiattite l’una sull’altra dentro ad un’oggetto 3D (anche se nel nostro caso usiamo solo 2 piani) che ruota al posto loro.

Questa proprietà è davvero molto potente, permette infatti di lavorare per la prima volta nello spazio tridimensionale. Non vi sono infatti limiti ai potenziali utilizzi. Per chi fosse interessato ad un’approfondimento completo sull’argomento, vi rimando alla lettura di questo interessantissimo tutorial realizzato da 24ways.org (in lingua madre).

Buon divertimento ;)

Demo rotazione 3D