TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista


Kuinka luoda Bootstrap Flip Card Widget?

EsimerkkejäOpetusohjelmatWEB
3
Sisältö
Vaakasuora Bootstrap Flip Card -widget
Bootstrap Flip Widgetin HTML
Täydellinen widget -koodi
Pystysuuntaisen kortin kääntämisen luominen

Bootstrapissa on upea korttikomponentti, joka sopii mobiililaitteille. Olemme keskustelleet Bootstrap -korteista ja korttien asetteluohjeista aiemmissa artikkeleissamme. Korttikomponenttia voidaan käyttää eri tyyleissä. Tässä artikkelissa kerromme, kuinka luoda Bootstrap -kääntökortti -widget.

Widgetissä on etu- ja takakortti. Kun pidät hiirtä tai kosketat mobiililaitteita, etukortin osa kääntyy tai kääntyy näyttääkseen takapuolen. Selitämme kääntymisen sekä vaaka- että pystysuunnassa.

Vaakasuora Bootstrap Flip Card -widget

Kaikissa Bootstrap -widgetissä tulee olla alustava CSS ja komentosarjat linkitettynä HTML -sivulle. Voit joko käyttää CDN -linkkejä tai isännöidä tiedostoja itse. Katso lisätietoja Bootstrap -käynnistysmallistamme. Käytämme Bootstrap 4.0 -version CDN -linkkiä esimerkkeihimme tässä artikkelissa.

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

Widgetissä on kolme osaa – etu-, taka- ja pääkuvan kääntöosasto. CSS -muunnosta käytetään sivujen kääntämiseen 180 astetta Y -akselilla vaakasuoran kääntövaikutelman luomiseksi.

Bootstrap Horizontal Card Flip -widget

Alla on vaakasuuntaisen kääntö -widgetin täydellinen 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;
}

Bootstrap Flip Widgetin HTML

Asetamme vain kaksi kortin osaa, joista toinen on etupuolen ja toinen takaosan sisällä.

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

Täydellinen widget -koodi

CSS: n ja HTML: n yhdistäminen koko koodin pitäisi näyttää seuraavalta:

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

Pystysuuntaisen kortin kääntämisen luominen

Mukautetussa CSS -koodissa olemme käyttäneet rotateY (180 astetta) vaakasuuntaisen kääntövaikutelman luomiseen. Vaihda vain kaikki rotateY: n esiintymät rotateX: ksi. Se yksinkertaisesti muuttaa fontin ja takapuolet pyörimään pystysuunnassa kuten alla:

Bootstrap -pystysuuntainen kortin kääntö -widget

saatat pitää myös Lisää kirjoittajalta

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. HyväksyäLisätietoja