Creare un effetto flip card con i CSS

Creare un effetto flip card con i CSS

In questo tutorial vediamo come creare delle flip card animate con l’utilizzo di HTML dei CSS.

Passando col mouse sopra l’elemento, questo effettuerà una rotazione di 180 gradi su sé stesso andando a mostrare il lato posteriore.

Prima di incominciare bisogna notare che l’effetto non funzionerà su dispositivi touchscreen, salvo l’utilizzo di un comando Javascript per gestire gli eventi :hover su touchscreen. Approfondiremo questo aspetto alla fine del tutorial.

Creare la card in HTML

<div class="flip-card-container">
	<div class="flip-card">
		<div id="flip-bob" class="flip-card-front"></div>
		<div class="flip-card-back">
			<h3>Bob</h3>
			<p>Avvocato <a href="#">Vai alla scheda</a></p>
		</div>
	</div>
</div>

La card è costituita da una div contenitore flip-card, che a sua volte contiene:

  • flip-card-front: il fronte della card
  • flip-card-back: il retro della card

Stili: il contenitore

.flip-card-container {
	width: 100%;
	padding: 50px 0;
	text-align: center;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-o-perspective: 800px;
	-ms-perspective: 800px;
	perspective: 800px;
}

Assegniamo al contenitore della (o delle) flip card la proprietà perspective, che ci permette di dare una prospettiva 3D all’elemento child. Notare che questa proprietà non ha effetto sull’elemento stesso in cui viene applicata ma negli elementi in esso contenuto.

Stili: la flip card

.flip-card {
	position: relative;
	width: 220px;
	height: 220px;
	display: inline-block;
	margin: 0 10px 20px 10px;
	border: 1px solid #000;
	cursor: default;
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.flip-card:hover {
	-webkit-transform: rotate3d(0,1,0,-180deg);
	-moz-transform: rotate3d(0,1,0,-180deg);
	-o-transform: rotate3d(0,1,0,-180deg);
	-ms-transform: rotate3d(0,1,0,-180deg);
	transform: rotate3d(0,1,0,-180deg);
}

Al contenitore della flip card assegniamo transition per ottenere un’animazione della durata di 0,8 secondi e preserve-3d per specificare che gli elementi child dovranno preservare la loro posizione 3D. Sull’evento :hover andiamo ad impostare una rotazione 3D della flip card di 180 gradi con rotate3d.

Stili: il fronte

.flip-card-front {
	position: absolute;
	width: 100%;
	height: 100%;
}

#flip-bob {
	background:url(img/effetto-flip-bob.jpg) no-repeat center;
}

La parte frontale della nostra quasi completata flip card è in posizione assoluta e ha un’immagine di background associata al suo id.

Stili: il retro

.flip-card-back {
	background-color: #fcfcfc;
	width: 100%;
	height: 100%;
	-webkit-transform: rotate3d(0,1,0,180deg);
	-moz-transform: rotate3d(0,1,0,180deg);
	-o-transform: rotate3d(0,1,0,180deg);
	-ms-transform: rotate3d(0,1,0,180deg);
	transform: rotate3d(0,1,0,180deg);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.flip-card-back h3 {
	color: #555;
	margin: 0 15px;
	padding: 40px 0 20px 0;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);
}

.flip-card-back p {
	color: #555;
	margin: 0 10px;
	padding: 10px 5px;
	border-top: 1px solid #000;
	font-size: 12px;
	font-style: italic;
}

.flip-card-back a {
	display: block;
	color: rgba(85,85,85, 0.8);
	padding-top: 5px;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.flip-card-back a:hover {
	color: rgba(158,8,36,0.7);
}

Per completare il tutto aggiungiamo gli stili relativi al retro: con backface-visibility: hidden; nascondiamo l’elemento e il suo contenuto fino a quando non avverrà la rotazione 3D all’evento mouse over.

Infine assegniamo alcuni stili agli elementi contenuti su questo lato e abbiamo così ottenuto con questo tutorial una simpatica cartolina animata con rotazione 3D.

Un tocco finale

L’effetto di rotazione, come accennato all’inizio, non funzionerà su mobile e tablet perché associata ad un evento :hover. Per far sì che il tocco dello schermo venga interpretato come mouse over dovremo aggiungere il seguente codice al div con la classe .flip-card.

ontouchstart="this.classList.toggle('hover');"