Как создать виджет Bootstrap Flip Card?

В Bootstrap есть замечательный карточный компонент, подходящий для мобильных устройств. Мы обсуждали карты Bootstrap и уроки по макетам карт в наших предыдущих статьях. Компонент карты может использоваться в разных стилях. В этой статье мы объясним, как создать виджет флип-карты Bootstrap.

Виджет имеет лицевую карту и обратную карту. При наведении указателя мыши или касании на мобильных устройствах компонент передней карты будет переворачиваться или поворачиваться, чтобы показать обратную сторону. Мы объясним переворачивание как в горизонтальном, так и в вертикальном направлениях.

Горизонтальный виджет Bootstrap Flip Card

Любой виджет Bootstrap должен иметь предварительные CSS и скрипты, связанные с HTML-страницей. Вы можете использовать ссылки CDN или разместить файлы самостоятельно. Обратитесь к нашему стартовому шаблону Bootstrap для получения более подробной информации. Мы будем использовать ссылку CDN для версии 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">

Виджет состоит из трех частей — передней, задней и основного блока imageflip. Преобразование CSS используется для поворота сторон на 180 градусов по оси Y для создания эффекта горизонтального отражения.

Виджет горизонтального переворота карточки Bootstrap
Виджет горизонтального переворота карточки Bootstrap

Ниже приведен полный 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;
}

HTML для виджета Bootstrap Flip

Мы просто вставляем два компонента карты: один внутри блока на передней панели, а другой — внутри блока на задней стороне.

<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="https://www.webnots.com/bootstrap-flip-card-widget/#" class="btn btn-info btn-md">Info Button</a>
</div>
<div class="card-footer">
This is a Footer
</div>
</div>
</div>
</div>
</div>

Полный код виджета

Собрав вместе CSS и HTML, полный код должен выглядеть, как показано ниже:

<!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="https://www.webnots.com/bootstrap-flip-card-widget/#" 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>

Создание вертикального переворота карточки

В пользовательском коде CSS мы использовали rotateY (180deg) для создания эффекта горизонтального отражения. Просто замените все вхождения rotateY на rotateX. Он просто изменит шрифт и обратные стороны, чтобы повернуть их в вертикальном направлении, как показано ниже:

Виджет вертикального переворота карточки Bootstrap
Виджет вертикального переворота карточки Bootstrap

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.