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

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

Owebs
20 апреля 2022
Просмотры 209
Рейтинг
Время чтения Время чтения: 4 минуты

Оглавление
Развернуть Свернуть

Oweb-solutions

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

 

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

Oweb-solutions

  • текст
  • текст
  • текст

Для создания 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);
}

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

Ow
Имя:
Комментарий:
Развернуть все Скрыть
Декор Декор

Популярные Популярные

Анимированный индикатор для пунктов меню на сайте
Просмотры 218
Рейтинг 15
8 декабря
6 месяцев назад

Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.

Оформления блока акций через CSS
Просмотры 463
Рейтинг 6
14 декабря
5 месяцев назад

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

Создание сайтов через нейросети
Просмотры 433
Рейтинг 4
9 февраля
4 месяцев назад

Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.

Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.

Оставьте заявку СЕЙЧАС

Поставив галочку, Вы даете согласие на обработку ваших Персональных данных

Сookies-файлы на сайте

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

Согласен