Создаём эффект 3D карточки на чистом CSS

Всем привет в данной записи я вам покажу как создать эффект 3D карточки на чистом CSS. Это эффект который будет переворачивать элемент на 180 градусов и показывать его оборотную часть.

Логика такая…у карточки будет 2 элемента, элемент который выводит переднюю часть и элемент который выводит заднюю часть. При наведении на карточку, задняя часть и передняя часть будут поворачивать и тем самым заменять друг друга.

HTML

Здесь мы прописываем основной контейнер, контейнер для карточки, а внутри контейнера для карточки прописываем заднюю и переднюю часть.

<div class="card_cantainer">
  <!-- КАРТОЧКА -->
  <div class="card">
    <!-- ЛИЦЕВАЯ СТОРОНА -->
    <div class="front_side"><span>Передняя сторона</span></div>
    <!-- ТЫЛЬНАЯ СТОРОНА -->
    <div class="back_side"><span>Задняя сторона</span></div>
  </div>
</div>

CSS

Здесь мы прописываем стили для основных блоков. В самом низу прописываем hover эффект, который будет срабатывать после наведения на элемент курсором мыши.

При наведение мы будем поворачивать 2 элемента так чтобы они закрывали друг друга, а их задние стороны мы будем скрывать.

.card_cantainer {
  position: absolute; //указывает, что элемент абсолютно позиционирован
  width: 100%; //ширина
  height: 100%; //высота
  left: 0; //отступ слева
  top: 0; //отступ сверху
  background-color: #BBDEFB; //задний фон
  display: flex;
  justify-content: center; //выравниваем по горизонтали
  align-items: center; //выравниваем по вертикали
}
.card {
  width: 300px;
  height: 300px;
  position: relative; //Положение элемента устанавливается относительно его исходного места
  perspective: 1000px;
}
.front_side, .back_side {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s; //задаем плавность анимации
  backface-visibility: hidden; //указываем чтобы тыльная сторона была прозрачной
  border-radius: 10px;
}
.front_side {
  background-color: #fff;
}
.back_side {
  background-color: #BDBDBD;
  transform: rotateY(180deg); //поворачиваем элемент на указанное количество градусов
}
.card:hover .front_side {transform: rotateY(180deg);}
.card:hover .back_side {transform: rotateY(360deg);}