Привет Кодер! Добро пожаловать в блог Codewithrandom. В этой статье мы создадим адаптивную несколько флип-карточек с использованием HTML и CSS. Когда вы наводите курсор, карта переворачивается, и это полностью адаптивный проект 3D Flip Card.
Блоки контента, которые вращаются при касании или удерживании, отображая контент с другой стороны. Это приятный эффект, который способствует приятному просмотру и предлагает еще один способ отображения большего количества данных, не покидая текущую страницу.
Итак, давайте начнем писать наш HTML-код для создания текста и структуры флип-карты.
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>3d Flip Card Html Css</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Flip Cards Responsive</h1> <div class="boxesContainer"> <div class="cardBox"> <div class="card"> <div class="front"> <h3>Card One</h3> <p>Hover to flip</p> <strong>↻</strong> </div> <div class="back"> <h3>Back Side One</h3> <p>Content in card one</p> <a href="#">Button 1</a> </div> </div> </div> <div class="cardBox"> <div class="card"> <div class="front"> <h3>Card Two</h3> <p>Hover to flip</p> <strong>↻</strong> </div> <div class="back"> <h3>Back Side Two</h3> <p>Content in card two</p> <a href="#">Button 2</a> </div> </div> </div> <div class="cardBox"> <div class="card"> <div class="front"> <h3>Card Three</h3> <p>Hover to flip</p> <strong>↻</strong> </div> <div class="back"> <h3>Back Side Three</h3> <p>Content in card three</p> <a href="#">Button 3</a> </div> </div> </div> <div class="cardBox"> <div class="card"> <div class="front"> <h3>Card Four</h3> <p>Hover to flip</p> <strong>↻</strong> </div> <div class="back"> <h3>Back Side Four</h3> <p>Content in card four</p> <a href="#">Button 4</a> </div> </div> </div> </div> <!--.boxesContainer--> </body> </html>
Во-первых, мы добавим заголовок для нашей анимации флип-карты, используя тег ‹h1›. Далее мы создадим контейнер для нашей коробки с карточкой, используя тег ‹div› с классом «boxesContainer», добавим для него заголовок с помощью тега h3, используя класс div «card», и добавим содержимое для абзаца, используя класс «boxesContainer». тег ‹p›. Аналогичным образом мы сделаем емкость для флип-карт с кнопкой 2, кнопкой 3 и кнопкой 4.
Это наша карта для всех четырех коробок, которые мы используем в нашем проекте Flip Card. Мы используем 2 div для каждой коробки. Мы создаем коробку и ее содержимое во 2-м div. Таким же образом создайте 4 коробки.
Здесь вы можете увидеть вывод только с HTML-кодом.
Вывод:-
Давайте напишем код Css, чтобы стилизовать эту трехмерную флип-карту и завершить наш проект.
Код CSS для флип-карты: -
body { color: #333; font-family: Arial, Helvetica, serif; font-weight: normal; margin: 0; padding: 0; background: url(https://josetxu.com/img/fondo_blanco.png) repeat 0 0 #fff; } h1 { background: #333; color: #fff; text-align: center; margin: 0 0 5% 0; padding: 0.5em; margin: 0 0 5% 0; } .cardBox { float: left; font-size: 1.2em; margin: 1% 0 0 1%; perspective: 800px; transition: all 0.3s ease 0s; width: 23.7%; } .cardBox:hover .card { transform: rotateY(180deg); } .card { background: #222; cursor: default; height: 300px; transform-style: preserve-3d; transition: transform 0.4s ease 0s; width: 100%; -webkit-animation: giro 1s 1; animation: giro 1s 1; } .card p { margin-bottom: 1.8em; } .card .front, .card .back { backface-visibility: hidden; box-sizing: border-box; color: white; display: block; font-size: 1.2em; height: 100%; padding: 0.8em; position: absolute; text-align: center; width: 100%; } .card .front strong { background: #fff; border-radius: 100%; color: #222; font-size: 1.5em; line-height: 30px; padding: 0 7px 4px 6px; } .card .back { transform: rotateY(180deg); } .card .back a { padding: 0.3em 0.5em; background: #333; color: #fff; text-decoration: none; border-radius: 1px; font-size: 0.9em; transition: all 0.2s ease 0s; } .card .back a:hover { background: #fff; color: #333; text-shadow: 0 0 1px #333; } .cardBox:nth-child(1) .card .back { background: cornflowerblue; } .cardBox:nth-child(2) .card .back { background: orange; } .cardBox:nth-child(3) .card .back { background: yellowgreen; } .cardBox:nth-child(4) .card .back { background: tomato; } .cardBox:nth-child(2) .card { -webkit-animation: giro 1.5s 1; animation: giro 1.5s 1; } .cardBox:nth-child(3) .card { -webkit-animation: giro 2s 1; animation: giro 2s 1; } .cardBox:nth-child(4) .card { -webkit-animation: giro 2.5s 1; animation: giro 2.5s 1; } @-webkit-keyframes giro { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } } @keyframes giro { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } } @media screen and (max-width: 767px) { .cardBox { margin-left: 2.8%; margin-top: 3%; width: 46%; } .card { height: 285px; } .cardBox:last-child { margin-bottom: 3%; } } @media screen and (max-width: 480px) { .cardBox { width: 94.5%; } .card { height: 260px; } }
Мы используем простой селектор css для создания нашего проекта флип-карты. Шаг за шагом оформляем наши карты спереди и сзади. Вот почему мы создаем несколько div в нашем разделе html. Затем стилизуйте карту, используя дочерние элементы селектора.
Шаг 1.Для начала мы стилизуем тело нашего веб-сайта с помощью селектора тегов body. Семейство шрифтов будет «Arial», цвет шрифта будет «белый», а свойство background будет использоваться для добавления изображения на фон флип-карты. Все эти настройки будут сделаны с использованием свойств флип-карты.
body { color: #333; font-family: Arial, Helvetica, serif; font-weight: normal; margin: 0; padding: 0; background: url(https://josetxu.com/img/fondo_blanco.png) repeat 0 0 #fff; }
Шаг 2. Цвет фона нашей флип-карты теперь будет установлен на «черный» с помощью селектора тега h1›, а цвет ее шрифта будет установлен на «белый» с помощью свойства color. Мы выровняем текст по середине, используя свойство text-align.
Свойство font-size будет использоваться для установки размера шрифта на 1,2 rem, свойство margin для установки границы на 1% сверху и слева, а свойство float для смещения его влево при добавлении стиля к флип-карте. контейнер.
h1 { background: #333; color: #fff; text-align: center; margin: 0 0 5% 0; padding: 0.5em; margin: 0 0 5% 0; } .cardBox { float: left; font-size: 1.2em; margin: 1% 0 0 1%; perspective: 800px; transition: all 0.3s ease 0s; width: 23.7%; } .cardBox:hover .card { transform: rotateY(180deg); }
После этого мы создаем анимацию, чтобы при наведении курсора на карточку она помогала и показывала нам обратно содержимое. А для создания адаптивных css-флип-карт и это действительно похоже на 3D-дизайн.
Вы можете увидеть окончательный предварительный просмотр здесь, вы можете увидеть, когда мы наводим курсор на нашу карту, она поворачивается назад в анимации, и если мы убираем курсор с карты, он возвращается и показывает содержимое карты спереди. Вот и все для этого проекта, и это полностью адаптивный проект, который вы можете попробовать.
Окончательный вывод нескольких флип-карт, реагирующих с использованием CSS: -
Надеюсь, вам понравится эта адаптивная несколько флип-карточек с использованием HTML и CSS. Вы можете создать свой собственный и использовать этот проект в любом проекте как часть проекта, например раздел отзывов и контактную форму. Если вам нужен еще какой-либо интерфейс, связанный с проектом. Посетите нашу домашнюю страницу, и вы получите более 100 проектов.
если у вас есть какие-либо недоразумения, прокомментируйте ниже или вы можете связаться с нами, заполнив нашу контактную форму в домашнем разделе.
Код от — Josetxu
автор — Codewithrandom
Какой редактор кода вы используете для Responsive 3D Flip Card?
Я лично рекомендую использовать VS Code Studio, он прост и удобен в использовании.
В чем польза флип-карты?
Флип-карты — это сильные карты, которые передают печатную информацию в простом для понимания стиле. Как правило, они производятся наборами. Наборы флип-карт могут включать небольшое количество карточек или большое количество карточек, и они чаще всего используются в справочных или учебных целях.
Как перевернуть карту в HTML и CSS?
Суть в том, чтобы повернуть элемент на 180 градусов, используя свойство CSS transform, которое выполняется путем ввода transform: rotateY.(180deg).