JSFiddle - React, Tailwind, and code Playground

by rainiscool

HTML

<div class="container">
      <div class="item front"></div>
      <div class="item page1"></div>
      <div class="item page2"></div>
 </div>

CSS

* {
    margin: 0;
    padding: 0;
   }
   .container {
     position: relative;
     width: 200px;
     height: 324px;
     margin: 100px auto;//вынести в отдельный див для позиции
     background-size: cover;
     transform-style: preserve-3d;
     perspective: 500px;
  }
   .item{
      position: absolute;
      width: 100%;
      height: 100%;
      transform-origin: 0 50%;
      transition: all 1.3s ease;
  }
    .front{
       background: url(http://s020.radikal.ru/i708/1609/7c/07895382c035.jpg) no-repeat;
       background-size: cover;
  }
    .page1{
       background: url(http://s017.radikal.ru/i432/1609/f0/c58bad585b9e.jpg) no-repeat;
       background-size: cover;
       display: none;
            }
     .page2{
        background: url(http://i069.radikal.ru/1609/47/102343523020.jpg) no-repeat;
        background-size: cover;
    }
      #current{
         z-index:11;
         display: block;
            }

JavaScript

var divs = $(".container div");//все дивы внутри контейнера

var front = divs.eq(0).attr('id', 'current');//айдишник первому диву
            
  	 $(document).on('keydown', function(e) {
                
                 var current = $("#current");//сохраняем текущую позицию
                
                 if (e.keyCode==39)//если клавиша вправо
                    current.css({ WebkitTransform: 'rotateY(-180deg)'});//анимация текущего элемента
                    var sled = $("#current").next();//делаем следующий див текущим
                        sled.css({'z-index' : '12', 'display' : 'block'});//следующий за текущим показываем
                    current.removeAttr("id")
                    sled.attr('id', 'current');//делаем next-элемент текущим
                if (e.keyCode==37)//если клавиша влево
                    current.css({ WebkitTransform: 'rotateY(0deg)'});//анимация текущего элемента
            });