TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur man skapar Bootstrap Flip Card Widget?

1

Bootstrap har en underbar kortkomponent som är lämplig för mobila enheter. Vi har diskuterat Bootstrap kort och kort layouter handledning i våra tidigare artiklar. Kortkomponenten kan användas i olika stilar. I den här artikeln låt oss förklara hur du skapar Bootstrap flip -kort -widget.

Widgeten har ett främre kort och ett bakre kort. När du svävar med musen eller trycker på mobila enheter kommer den främre kortkomponenten att vända eller rotera för att visa baksidan. Vi kommer att förklara vändningen i både horisontella och vertikala riktningar.

Horizontal Bootstrap Flip Card Widget

Varje Bootstrap -widget bör ha den preliminära CSS och skript länkade på HTML -sidan. Du kan antingen använda CDN -länkarna eller vara värd för filerna på egen hand. Se vår Bootstrap -startmall för mer information. Vi kommer att använda CDN -länken för Bootstrap 4.0 -versionen för våra exempel i den här artikeln.

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

Widgeten har tre delar – framsidan, baksidan och huvudbilden diveflip div. CSS -transform används för att rotera sidorna till 180 grader i Y -axeln för att skapa horisontell flip -effekt.

Bootstrap Horizontal Card Flip Widget

Nedan är hela CSS för den horisontella flip -widgeten :

.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 för Bootstrap Flip Widget

Vi sätter bara in två kortkomponenter, en inuti framsidan div och den andra inuti baksidan div.

<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>

Den kompletta widgetkoden

Att sätta ihop CSS och HTML tillsammans ska hela koden se ut nedan:

<!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>

Skapa vertikal kortvändning

I den anpassade CSS -koden har vi använt rotateY (180deg) för att skapa horisontell flip -effekt. Ändra bara alla förekomster av rotateY till rotateX. Det kommer helt enkelt att ändra teckensnitt och baksida för att rotera i vertikal riktning som nedan:

Bootstrap Vertical Card Flip Widget

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer