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!
Leave a Reply