Трансформация 3D карточки-поворот на 180 градусов CSS3

HTML часть

<div class="section">
  <div class="container">
   <div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
   <div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
   <div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
   <div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
   <div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
   <div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
  </div>
</div>

CSS часть (переворачиваем карточку на 180 градусов)

.section{
 perspective: 1000px;
}
.container{
 width: 680px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 100vh;
  transition: 1s all;
  transform: rotateX(55deg) rotateZ(-45deg) rotateY(10deg);
  transform-style: preserve-3d;
}
.container-origin{
 transform: rotate(0);
}
img{
 max-width: 100%;
}
.card{
 width: 200px; 
 margin: 10px;
 transition: 0.3s;
}
.card:hover{
 cursor: pointer;
 transform:translateZ(15px);
}

Чуть-чуть jquery для добавления класса для контейнера

$('.card').on('click', function () {
 $('.container').toggleClass('container-origin');
})
$('.menu-btn').on('click', function (e) {
 e.preventDefault; /*отменяем стандартное событие*/ $(this).toggleClass('menu-btn_active');
 $('.menu-nav').toggleClass('menu-nav_active');
})