Come creare un menu di navigazione con rotazione 3D in HTML

Benvenuti a tutti in questo mio primo tutorial! Oggi vi propongo un menu di navigazione costituito da delle card che ruotano con un bellissimo effetto 3D.

3 card che ruotano tramite codice html — 1 – Situazione iniziale

Cliccando su questa pagina preview è possibile visualizzare una demo del progetto.

1. Caricamento delle risorse esterne

All’interno dell’head del nostro documento HTML inserire gli opportuni tag che consentono di caricare un foglio di stile CSS (styles.css) e javascript (code.js).

<head>
<title>3D Menu Cards</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="code.js"></script>
</head>

<head>

<title>3D Menu Cards</title>

</head>

2. Creazione di una “Card”

Quella che ho denominato “card” è un div che contiene un fronte (front) e un retro (back). All’interno del div con classe back ho inserito del testo e un area per i link.

<div class="container">
		<div class="card">
			<div class="front" style="background-image:url(img/1.jpg)"> <!- Questo div conterrà il fronte della card -!>
				<h3>Coniglio</h3>
			</div>
			<div class="back"> <!- Questo div conterrà il retro della card -!> 
				<h3>Un dolce coniglio</h3>
				<p>Questo è un dolce coniglio in mezzo alla neve</p>
				<nav>
					<a href="#">Link</a>
				</nav>
			</div>
		</div>
	</div>

<h3>Coniglio</h3>

</div>

<h3>Un dolce coniglio</h3>

<p>Questo è un dolce coniglio in mezzo alla neve</p>

<nav>

</nav>

</div>

(Ovviamente le cards possono essere più d’una, è sufficiente aggiungere nuovamente un div container e sostituire i contenuti)

Attenzione: Le immagini (per questioni di ordine!) sono state inserite all’interno della cartella “img/”

**3. Il documento CSS (styles.css)**

In questo documento sono contenute tutte le formattazioni grafiche delle card, i colori dei testi, gli sfondi e gli effetti di rotazione.

body{
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	background: rgb(21, 34, 47);
}


.container {
	display: inline-block;
	transform: rotateY(0deg);
	perspective: 500px;
	margin: 2em;
}
.container:hover .card,
.container.hover .card{
	transform: rotateY(180deg);
}

/* Qui è possibile modificare le dimensioni delle cards */
.container,
.front,
.back{
	width: 300px;
	height: 500px;
}

.card{
	position: relative;
	display: block;
	transition: 1s;
	transform-style: preserve-3d;
}


.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
}

.front {
	z-index: 2;
	transform: rotateY(0deg);
	background-size: cover;
}
.front h3{
	background: rgba(0,0,0,0.5);
	color: #fff;
	text-align: center;
	padding: .5em;
}



.back {
	padding: 1em;
	transform: rotateY(180deg);
	background: #eee;
}



nav{
	display: block;
	padding: 2em;
	margin: 0;
}
nav a{
	display: block;
	list-style: none;
	background: #aaa;
	color: #fff;
	font-size: 1.5em;
	margin-top: .5em;
	padding: .5em;
	text-align: center;
}
nav a:hover{
	background: #333;
}

body{

font-family: "Trebuchet MS", Helvetica, sans-serif;

background: rgb(21, 34, 47);

}

.container {

display: inline-block;

transform: rotateY(0deg);

perspective: 500px;

margin: 2em;

}

.container:hover .card,

.container.hover .card{

transform: rotateY(180deg);

}

/* Qui è possibile modificare le dimensioni delle cards */

.container,

.front,

.back{

width: 300px;

height: 500px;

}

.card{

position: relative;

display: block;

transition: 1s;

transform-style: preserve-3d;

}

.front, .back {

backface-visibility: hidden;

position: absolute;

top: 0;

left: 0;

box-sizing: border-box;

}

.front {

z-index: 2;

transform: rotateY(0deg);

background-size: cover;

}

.front h3{

background: rgba(0,0,0,0.5);

color: #fff;

text-align: center;

padding: .5em;

}

.back {

padding: 1em;

transform: rotateY(180deg);

background: #eee;

}

nav{

display: block;

padding: 2em;

margin: 0;

}

nav a{

display: block;

list-style: none;

background: #aaa;

color: #fff;

font-size: 1.5em;

margin-top: .5em;

padding: .5em;

text-align: center;

}

nav a:hover{

background: #333;

}

**4. Il documento JavaScript (code.js)**

Il seguente codice JavaScript ci permette di attivare l’effetto sui device mobili.

window.addEventListener("load", function(){

	var containers = document.querySelectorAll(".container");
	for(var i=0; i<containers.length; i++){
		containers[i].addEventListener("touchstart", function(){
			this.classList.toggle('hover');
		})
	}
});

window.addEventListener("load", function(){

var containers = document.querySelectorAll(".container");

for(var i=0; i<containers.length; i++){

containers[i].addEventListener("touchstart", function(){

this.classList.toggle('hover');

})

}

});

Per scaricare il demo di questo progetto clicca sul seguente link: Archivio Zip del progetto