Эффект переворачивающейся карточки на CSS
Доброго времени суток! В данной статье мы рассмотрим как перевернуть карточку, для отображения ее
фоновой части, в которой может быть дополнительный контент.
файл index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Переворачивающийся карточка на CSS</title>
<link rel="stylesheet" href="card.css">
</head>
<body>
<div class="container">
<div class="work-card">
<div class="work-card__inner">
<!-- Отображаемая часть карточки -->
<div class="work-card__front">
<div class="front__text">
<div class="front__text-title">Работа <br />вахтой</div>
<div class="front__text-subtitle">Наши вакансии</div>
</div>
<div class="front__image">
<img src="man_1.png" alt="man 1" class="img-fluid" />
</div>
<div class="front__hint">
Наведите, чтобы увидеть перечень вакансий
</div>
</div>
<!-- Фоновая часть, отображается при наведение мыши -->
<div class="work-card__background">
<ul class="vacancies-list">
<li><a href="#">Разнорабочий<br>г. Кировск</a></li>
<li><a href="#">Разнорабочий<br>г. Кировск</a></li>
<li><a href="#">Разнорабочий<br>г. Кировск</a></li>
<li><a href="#">Разнорабочий<br>г. Кировск</a></li>
<li><a href="#">Разнорабочий<br>г. Кировск</a></li>
<li><a href="#">Разнорабочий<br>г. Кировск</a></li>
<li><a href="#">Разнорабочий<br>г. Кировск</a></li>
<li><a href="#">Разнорабочий<br>г. Кировск</a></li>
<li><a href="#">Разнорабочий<br>г. Кировск</a></li>
<li><a href="#">Разнорабочий<br>г. Кировск</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
card.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100%;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
max-width: 992px;
margin: 0 auto;
padding: 15px;
}
.img-fluid {
/* чтобы изображение не вылезало за пределы контейнера */
max-width: 100%;
}
/**
Open works card
*/
.work-card {
/* background-color: transparent; */
max-width: 50%;
min-height: 400px;
margin: 0 auto;
cursor: pointer;
/* повоаричает карту с перспективой - увеличьте время перехода с 0.6s до 10s, чтобы понять что это означает */
perspective: 1000px;
}
.work-card__inner {
position: relative;
min-height: 400px;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.work-card__front,
.work-card__background {
position: absolute;
width: 100%;
height: 100%;
border-radius: 16px;
/* скрываем тыловую часть у блоков */
backface-visibility: hidden;
}
.work-card__front {
background-image: url(card_bg_1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.work-card .front__text {
background-image: none;
}
.work-card__background {
padding: 5px 30px;
background-image: url(card_bg_2.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
/* при первоначальном отображении срываем второй блок, поворачивая его на 180 градусов тыловой частью, которая
благодаря свойству backface-visibility: hidden - скрыта */
transform: rotateY(180deg);
}
.work-card__background .vacancies-list {
list-style-type: none;
width: 400px;
margin: 0 auto;
padding: 0;
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
}
@media (max-width: 992px) {
.work-card {
max-width: 80%;
}
.work-card__background .vacancies-list {
font-size: 0.8rem;
}
}
.work-card__background .vacancies-list li {
width: 50%;
padding-left: 1rem;
position: relative;
padding-top: 1rem;
padding-bottom: 1rem;
}
.work-card__background .vacancies-list li a {
color: #fff;
}
.work-card__background .vacancies-list li a:hover {
color: #debc0f;
}
.work-card__background .vacancies-list li::before {
content: "";
position: absolute;
left: -0.5rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 100%;
background-color: #e3bf0d;
top: 1.5rem;
}
/**
* при наведении мыши - поворачиваем карточку
*/
.work-card:hover .work-card__inner {
transform: rotateY(-180deg);
}
.front__text {
position: absolute;
left: 50px;
top: 50px;
}
.front__text-title {
font-size: 2rem;
font-weight: bold;
line-height: 1;
}
.front__text-subtitle {
font-weight: lighter;
font-size: 1.125rem;
padding-top: 8px;
}
.front__image {
position: absolute;
max-width: 18rem;
right: 0;
bottom: 0;
}
.front__image--right {
max-width: 16rem;
}
@media (max-width: 992px) {
.front__image {
max-width: 12rem;
}
.front__image--right {
max-width: 10rem;
}
}
.front__hint {
position: absolute;
font-size: 0.85rem;
max-width: 100px;
left: 50px;
bottom: 50px;
color: gray;
}
Таким образом при наведении мыши на карточку или при прикосновении к карточке на экране смартфона
она переворачивается и отображает блок с другим контентом.
