Интерактивность сайта имеет большое значение с точки зрения привлечения клиентов и делает сайт более запоминающимся. Для достижения этой задачи используются анимации, ховер эффекты, транзишины или методы JavaScript-анимаций. А иногда и то, и другое. В данном же уроке мы напишем такой заметный и приятный для глаза элемент, как "3-D карточка". При этом, обойдёмся только применением HTML и CSS.
Для создания 3-D карточки вам надо скопировать следующие части кодов:
<div class="card-3d">
<div class="front">
<img src="https://static8.depositphotos.com/1008939/939/i/600/depositphotos_9394698-stock-photo-lonely-man.jpg" alt="">
</div>
<div class="back">
<div class="back-content">
<h2>Oweb-solutions</h2>
<ul>
<li>текст</li>
<li>текст</li>
<li>текст</li>
</ul>
</div>
</div>
</div>
.card-3d {
position: relative;
cursor: pointer;
width: 340px;
height: 480px;
}
.front,
.back {
width: 100%;
height: 100%;
overflow: hidden;
backface-visibility: hidden;
position: absolute;
transition: transform .6s linear;
}
.front img {
object-fit: cover;
height: 100%;
width: 100%;
}
.front {
transform: perspective(600px) rotateY(0deg);
}
.back {
background: #f1f1f1;
transform: perspective(600px) rotateY(180deg);
}
.back-content {
display: flex;
flex-direction: column;
align-items: center;
color: #2c3e50;
text-align: center;
width: 100%;
height: 100%;
}
.back-content ul {
margin-top: 40px;
font-size: 18px;
line-height: 1.3;
font-weight: 500;
text-align: left;
padding: 0;
}
.card-3d:hover>.front {
transform: perspective(600px) rotateY(-180deg);
}
.card-3d:hover>.back {
transform: perspective(600px) rotateY(0deg);
}
После копирования вышеупомянутых кусков кода, у вас должна появиться вот такая кнопка:
Использовать карточку легко: нужно всего лишь вставить ссылку на нужную вам картинку, вместо имеющейся и заполнить по своему усмотрению контентную часть (всё то, что находится в теге с классом back-content).