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

3 card che ruotano tramite codice 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.

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).

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.

(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.

 

4. Il documento JavaScript (code.js)

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

 

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