Привет Кодер! Добро пожаловать в блог 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>&#x21bb;</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>&#x21bb;</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>&#x21bb;</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>&#x21bb;</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).