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

[code_snippet y=”2016″ name=”effetto-flip-card-con-i-css” id=”1″]

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

[code_snippet y=”2016″ name=”effetto-flip-card-con-i-css” id=”2″]

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

[code_snippet y=”2016″ name=”effetto-flip-card-con-i-css” id=”3″]

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

[code_snippet y=”2016″ name=”effetto-flip-card-con-i-css” id=”4″]

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

[code_snippet y=”2016″ name=”effetto-flip-card-con-i-css” id=”5″]

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.

[code_snippet y=”2016″ name=”effetto-flip-card-con-i-css” id=”6″]