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

Owebs

20 апреля 2022

139

Время чтения: 4 минуты

Оглавление

Развернуть Свернуть

Oweb-solutions

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).

Поделиться статьей:

Owebs