Как сделать 3D карточку на чистом CSS ( Flip 3D-card CSS )

В данной статье, речь пойдет о том, как сделать 3D карточку на чистом CSS. Это может пригодиться вам как при создании Landing Page, так и при создании интернет-магазина.

ДЕМО

Чтобы реализовать 3D карточку, нам для начала нужно написать html.

Выглядит это примерно так:

<div class="wrap"> <!--Обертка для карточки-->
    <div class="cart"> <!--Сама карточка -->
      <div class="front"><img src="img/iphone4.jpg" ></div> <!--Фронтальная сторона карточки-->
      <div class="back"><img src="img/iphone4.jpg"></div> <!--Обратная сторона карточки-->
    </div>
</div>

Ну и сам CSS:

/*Стили для обертки*/
.wrap{
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  display:flex; /*Это сделано чтобы карточка была розмещена по центру*/
  justify-content:center; /*Это сделано чтобы карточка была розмещена по центру*/
  align-items:center; /*Это сделано чтобы карточка была розмещена по центру*/
}

/*Оформляем саму карточку*/
.cart {
  width:250px;
  height: 475px;
  position:relative;
  perspective: 1000px; /*Добавляем эффект 3D*/
 
}

.front, .back{
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  display:flex;
  justify-content:center;
  align-items:center; 
  transition:1s;
  backface-visibility: hidden; /*Отключаем тыльную сторону у .front и .back*/
}

.back{
  transform:rotateY(180deg); /*Разворачиваем на 180 градусов по горизонтальной оси*/
}
.cart:hover .front{
  transform:rotateY(180deg);
}
.cart:hover .back{
  transform:rotateY(360deg);
}

Если у вас есть вопросы, оставляете их в комментариях и я обязательно на них отвечу 🙂
А также чтобы не пропустить выхода новых статей подписывайтесь на наш telegram-канал и соц.сети