vk
Назад»/Все статьи»

Создаем 3D-эффект переворачивания карточки на HTML и CSS

Document
Как сделать переворачивающиеся карточки: 3d эффект картинки

Oweb-solutions

  • Компания №1
  • на этой стороне картинки может быть размещен любой текст или параметры товара
  • Учись программировать вместе с нами!

Интерактивность сайта имеет большое значение с точки зрения привлечения клиентов и делает сайт более запоминающимся. Для достижения этой задачи используются анимации, ховер эффекты, транзишины или методы JavaScript-анимаций. А иногда и то, и другое. В данном же уроке мы напишем такой заметный и приятный для глаза элемент, как "3-D карточка". При этом, обойдёмся только применением HTML и CSS.

Для создания 3-D карточки вам надо скопировать следующие части кодов:

HTML:
                <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>
CSS:
                .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);
}

После копирования вышеупомянутых кусков кода, у вас должна появиться вот такая кнопка:

3-D карточка

Oweb-solutions

  • Компания №1
  • на этой стороне картинки может быть размещен любой текст или параметры товара
  • Учись программировать вместе с нами!

Использовать карточку легко: нужно всего лишь вставить ссылку на нужную вам картинку, вместо имеющейся и заполнить по своему усмотрению контентную часть (всё то, что находится в теге с классом back-content).