TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare un widget Flip Card Bootstrap?

9

Bootstrap ha un meraviglioso componente per schede adatto ai dispositivi mobili. Abbiamo discusso delle carte Bootstrap e dei tutorial sui layout delle carte nei nostri articoli precedenti. Il componente della carta può essere utilizzato in diversi stili. In questo articolo spieghiamo come creare un widget per schede a fogli mobili Bootstrap.

Il widget ha una carta anteriore e una carta posteriore. Quando passi con il mouse o tocchi sui dispositivi mobili, il componente della scheda anteriore si capovolge o ruota per mostrare il lato posteriore. Spiegheremo il ribaltamento in entrambe le direzioni orizzontale e verticale.

Widget Flip Card Bootstrap orizzontale

Qualsiasi widget Bootstrap dovrebbe avere il CSS preliminare e gli script collegati nella pagina HTML. Puoi utilizzare i collegamenti CDN o ospitare i file da solo. Fare riferimento al nostro modello di avvio Bootstrap per maggiori dettagli. Useremo il collegamento CDN per la versione Bootstrap 4.0 per i nostri esempi in questo articolo.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Il widget ha tre parti: frontside, backside e il div imageflip principale. La trasformazione CSS viene utilizzata per ruotare i lati di 180 gradi nell’asse Y per creare un effetto di ribaltamento orizzontale.

Widget Flip Card orizzontale Bootstrap

Di seguito è riportato il CSS completo per il widget di ribaltamento orizzontale :

.image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .image-flip { margin-bottom:200px; width: 300px; height: 250px; } .mainflip { -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -ms-transition: 1s; -moz-transition: 1s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: relative; } .frontside, .backside { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -moz-transition: 1s; -moz-transform-style: preserve-3d; -o-transition: 1s; -o-transform-style: preserve-3d; -ms-transition: 1s; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } .frontside { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); z-index: 2; } .backside { background: white; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card, .card-img-top { border-radius: 0; }

HTML per il widget Flip Bootstrap

Inseriamo solo due componenti della scheda, uno all’interno del div frontside e l’altro all’interno del div backside.

<div class="image-flip" ontouchstart="this.classList.toggle('hover');"> <div class="mainflip"> <div class="frontside"> <div class="card" style="width:20rem;"> <img class="card-img-top img- fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> </div> </div> </div> <div class="backside"> <div class="card" style="width:20rem;"> <div class="card-header"> This is a Header </div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card component with header and footer.</p> <a href="#" class="btn btn-info btn-md">Info Button</a> </div> <div class="card-footer"> This is a Footer </div> </div> </div> </div> </div>

Il codice widget completo

Mettendo insieme CSS e HTML, il codice completo dovrebbe apparire come di seguito:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style type="text/css"> .image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .image-flip { margin-bottom:200px; width: 300px; height: 250px; } .mainflip { -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -ms-transition: 1s; -moz-transition: 1s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: relative; } .frontside, .backside { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -moz-transition: 1s; -moz-transform-style: preserve-3d; -o-transition: 1s; -o-transform-style: preserve-3d; -ms-transition: 1s; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } .frontside { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); z-index: 2; } .backside { background: white; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card, .card-img-top { border-radius: 0; } </style> </head> <body> <div class="image-flip" ontouchstart="this.classList.toggle('hover');"> <div class="mainflip"> <div class="frontside"> <div class="card" style="width:20rem;"> <img class="card-img-top img- fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> </div> </div> </div> <div class="backside"> <div class="card" style="width:20rem;"> <div class="card-header"> This is a Header </div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card component with header and footer.</p> <a href="#" class="btn btn-info btn-md">Info Button</a> </div> <div class="card-footer"> This is a Footer </div> </div> </div> </div> </div> </body> </html>

Creazione di un capovolgimento verticale della carta

Nel codice CSS personalizzato abbiamo usato rotateY(180deg) per creare l’effetto di ribaltamento orizzontale. Basta cambiare tutte le occorrenze di rotateY in rotateX. Cambierà semplicemente il carattere e il retro per ruotare in direzione verticale come di seguito:

Bootstrap Vertical Card Flip Widget

Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More