Blog Mind
  • How To
  • Vita da corsista
  • Inspiration
  • Work Tips
  • Corsi
Home  /  How To • Web Design  /  Divertiamoci con il CSS con il flip side animation effect!
How To

Divertiamoci con il CSS con il flip side animation effect!

Mind Progettazione siti web
Esempio di flip side animation

Applichiamo un effetto in CSS3 molto divertente ed esteticamente d’impatto, il flip side animation effect!

Basta un po’ di CSS3 e il gioco è fatto.

Il bello del flip side effect è che nella sua semplicità ti permette di decidere la velocità (leggi durata dell’animazione), puoi far ruotare su se stesso un riquadro mettendo ad esempio su un lato un’immagine e sull’altro il testo, o due immagini, due testi, un titolo e il testo… insomma come spesso succede con il CSS3, il limite è la fantasia!

Il flip side effect è un effetto di animazione in CSS3 che si può definire tridimensionale, in quanto da l’impressione che il riquadro si capovolga per rivelare cosa nasconde dall’altro lato.

Anche in questo caso, come in ogni cosa, è bene non esagerare con le animazioni per evitare di fare un “pastrocchio” per essere espliciti. Inseriscine una o due al massimo purchè l’effetto finale sia equilibrato e per non appesantire troppo il caricamento delle pagine.

Puoi capovolgere il div ruotandolo di 180 gradi o sull’asse verticale o su quella orizzontale grazie alla proprietà “transform”, ma vediamola in azione!

Iniziamo con l’HTML:

<div class=”flip-container” ontouchstart=”this.classList.toggle(‘hover’);”>

<div class=”flipper”>

<div class=”front”>

<!– inserisci un’immagine o un testo–>

</div>

<div class=”back”>

<!– inserisci un’immagine o un testo –>

</div>

</div>

</div>

Abbiamo creato i due lati “front” e “back” e assegnato le classi:

“Flip-container” riguarda tutto il div in generale al quale assegneremo la misura in pixel che vogliamo riservargli, questo valore si chiama “perspective”.

“Ontouchstart” è specificamente dedicato ai dispositivi touch, che attiveranno l’animazione appunto al tocco.

Ora passiamo al CSS:

/* contenitore */.flip-container {

perspective: 1000px;

}

 

/* il riquadro si capovolge all’hover, elenchiamo le classi coinvolte e indichiamo l’asse su cui devono ruotare, in questo caso quella verticale, se preferisci quella orizzontale sostituisci la Y con la X*/

.flip-container:hover .flipper, .flip-container.hover .flipper {

transform: rotateY(180deg);

}

 

/* definiamo larghezza e altezza del riquadro, questo è un esempio, puoi adattarle alle tue esigenze*/

.flip-container, .front, .back {

width: 320px;

height: 480px;

}

 

/* qui inseriamo la durata dell’animazione */

.flipper {

transition: 0.6s;

transform-style: preserve-3d;

position: relative;

}

 

/* nascondiamo la parte dietro durante l’animazione per un effetto più pulito */

.front, .back {

backface-visibility: hidden;

position: absolute;

top: 0;

left: 0;

}

 

/* sovrapponiamo il lato frontale */

.front {

z-index: 2;

/* for firefox 31 */

transform: rotateY(0deg);

}

 

/* e riveliamo il lato posteriore del riquadro */

.back {

transform: rotateY(180deg);}

Abbiamo inserito alla proprietà “position” il valore “absolute” in corrispondenza della dichiarazione delle classi .front e .back per consentire la sovrapposizione esatta dei due riquadri appunto, il “front” e il “back”.

Per invertire il senso della rotazione basta scrivere (-180deg) al posto di (180deg) quando definiamo il transform:rotateY(), proprio grazie a questa entrambe le facce ruoteranno di 180 gradi nello stesso momento.

Lo z-index invece lo abbiamo stabilito per indicare quale riquadro dovrà essere posizionato “sopra” all’altro, e quindi potremo vedere.
Ora non vi resta che sbizzarrirvi!

Related Posts

  • Pagina 404 esempio

    Pagina 404: e se non fosse solo un errore?

  • Usabilità sito web

    Usabilità di un sito web: le regole da seguire

  • Come progettare un sito web

    Come progettare un sito web efficace

  • Numerazione delle pagine con InDesign

    Come inserire la numerazione delle pagine con InDesign

Leave a Reply

Annulla risposta

Newsletter

Iscriviti alla nostra newsletter!



Post recenti

  • Brochure esempi
    Brochure: esempi utili per i tuoi progetti di grafica Inspiration
  • Pagina 404 esempio
    Pagina 404: e se non fosse solo un errore? How To, Linguaggi di programmazione
  • Logo Apple storia
    La storia del logo Apple, dalle origini ad oggi Inspiration
  • Creazione logo con Illustrator
    Il mio primo logo con Illustrator Vita da corsista
  • Creatività e pensiero divergente
    Creatività e pensiero divergente: 3 esercizi per allenarli Work Tips

Tendenze

Corso Graphic Design Corso Web Design Creatività Gestione clienti Ispirazione grafica Passione fotografia Passione grafica Personal branding Professione fumettista Progettazione siti web Strategie di marketing Strategie di marketing e comunicazione

Contatti

Dove siamo

Sede
Via Venezia, 90/A
35129 Padova, Italia

Come contattarci

Telefono
049 7449220
Email
info@creativemind.academy

Newsletter

Iscriviti alla nostra newsletter!

Lasciaci la tua email
Riceverai in anteprima i nostri articoli



Post popolari

  • Brand book per l'immagine aziendale
    Guida alla creazione di un brand book Mind
Blog Mind

© MIND srl 2019 - Tutti i diritti riservati

MIND srl P.IVA e Codice Fiscale 05079870282 - Rea PD - 441420 - Reg Imprese 11/08/2017 - Marchio registrato/depositato presso Camera di Commercio codice 302016000074765