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.
[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:
[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.
[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.
[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.
[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.
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″]
Se sei un appassionato di oggetti da collezione, è probabile che tu abbia già sentito…
Se ne soffri la conosci e se non ne soffri, invece, sarebbe meglio conoscerla per…
Da sempre l’uomo è rimasto affascinato e si è interessato alla magia. Che sia nella…
Il contratto di locazione a canone concordato è una forma di locazione in cui la misura del…
Negli ultimi anni, soprattutto da dopo la pandemia, sempre più italiani si sono rivolti a…
Stai pensando di abbellire il tuo giardino installando una piscina di ultima generazione? Se la…