TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak stworzyć widżet Bootstrap Flip Card?

1

Bootstrap ma wspaniały komponent karty, odpowiedni dla urządzeń mobilnych. W poprzednich artykułach omówiliśmy samouczki dotyczące kart Bootstrap i układów kart. Komponent karty może być używany w różnych stylach. W tym artykule wyjaśnimy, jak stworzyć widżet flip-karty Bootstrap.

Widget ma przednią i tylną kartę. Gdy najedziesz myszą lub dotkniesz urządzenia mobilnego, przednia część karty zostanie odwrócona lub obrócona, aby pokazać tylną stronę. Wyjaśnimy odwracanie zarówno w kierunku poziomym, jak i pionowym.

Poziomy widżet z odwracaną kartą Bootstrap

Każdy widżet Bootstrap powinien mieć połączony wstępny kod CSS i skrypty na stronie HTML. Możesz użyć łączy CDN lub samodzielnie hostować pliki. Zapoznaj się z naszym szablonem startowym Bootstrap, aby uzyskać więcej informacji. W naszych przykładach w tym artykule użyjemy łącza CDN dla wersji Bootstrap 4.0.

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

Widget składa się z trzech części – frontside, backside i główny div imageflip. Przekształcenie CSS służy do obracania boków o 180 stopni w osi Y w celu uzyskania efektu odwracania w poziomie.

Widżet odwracania karty poziomej Bootstrap

Poniżej znajduje się kompletny kod CSS dla poziomego widżetu flip :

.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 dla widżetu Bootstrap Flip

Po prostu wstawiamy dwa elementy karty, jeden wewnątrz div frontside, a drugi wewnątrz 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>

Kompletny kod widżetu

Łącząc CSS i HTML, cały kod powinien wyglądać jak poniżej:

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

Tworzenie odwracania kart w pionie

W niestandardowym kodzie CSS użyliśmy rotateY(180deg) do stworzenia efektu odwrócenia w poziomie. Po prostu zmień wszystkie wystąpienia rotateY na rotateX. Po prostu zmieni czcionkę i tyły, aby obracać się w kierunku pionowym, jak poniżej:

Widżet odwracania kart w pionie Bootstrap

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów