JSFiddle - React, Tailwind, and code Playground

HTML

<div id="panelBtn">
<button data-animate="1">Куб влево</button>
<button data-animate="2">Куб вправо</button>
<button data-animate="3">Куб вверх</button>
<button data-animate="4">Куб вниз</button>
</div>
<div class="pt-perspective" id="main">
<div data-id="1" class="pt-page pt-page-1 pt-page-current"><h1>1 block</h1></div>
<div data-id="2" class="pt-page pt-page-2"><h1>2 block</h1></div>
<div data-id="3" class="pt-page pt-page-3"><h1>3 block</h1></div>
<div data-id="4" class="pt-page pt-page-4"><h1>4 block</h1></div>
<div data-id="5" class="pt-page pt-page-5"><h1>5 block</h1></div>
<div data-id="6" class="pt-page pt-page-6"><h1>6 block</h1></div>
</div>

CSS

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
#panelBtn{
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 1000;
}
.pt-perspective {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective: 1200px;
}
.pt-page {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.pt-page-1 {
	background: #0ac2d2;
}

.pt-page-2 {
	background: #7bb7fa;
}

.pt-page-3 {
	background: #60d7a9;
}

.pt-page-4 {
	background: #fdc162;
}

.pt-page-5 {
	background: #fd6a62;
}

.pt-page-6 {
	background: #f68dbb;
}
.pt-page-current {
    visibility: visible;
    z-index: 1;
}
.pt-page-ontop {
    z-index: 999;
}

/* cube */
.pt-page-rotateCubeLeftOut {
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	-webkit-animation: rotateCubeLeftOut .6s both ease-in;
	animation: rotateCubeLeftOut .6s both ease-in;
}
.pt-page-rotateCubeLeftIn {
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-animation: rotateCubeLeftIn .6s both ease-in;
	animation: rotateCubeLeftIn .6s both ease-in;
}
.pt-page-rotateCubeRightOut {
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-animation: rotateCubeRightOut .6s both ease-in;
	animation: rotateCubeRightOut .6s both ease-in;
}
.pt-page-rotateCubeRightIn {
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	-webkit-animation: rotateCubeRightIn .6s both ease-in;
	animation: rotateCubeRightIn .6s both ease-in;
}
.pt-page-rotateCubeTopOut {
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-animation: rotateCubeTopOut .6s...

JavaScript

var animEndEventName = "animationend";
var endCurrPage = false, endNextPage = false, isAnimating = false;
var prevA, prevId;
var variants = [
{"2:2|3:1|4:4|5:3":[2,3,4,5], "5:2|4:1|2:4|3:3":[5,4,2,3], "3:2|2:1|5:4|4:3":[3,2,5,4], "4:2|5:1|3:4|2:3":[4,5,3,2]},
{"1:2|6:1|5:4|4:3":[1,6,5,4], "4:2|5:1|1:4|6:3":[4,5,1,6], "6:2|1:1|4:4|5:3":[6,1,4,5], "5:2|4:1|6:4|1:3":[5,4,6,1]},
{"1:2|6:1|4:4|5:3":[1,6,4,5], "5:2|4:1|1:4|6:3":[5,4,1,6], "6:2|1:1|5:4|4:3":[6,1,5,4], "4:2|5:1|6:4|1:3":[4,5,6,1]},
{"1:2|6:1|2:4|3:3":[1,6,2,3], "3:2|2:1|1:4|6:3":[3,2,1,6], "6:2|1:1|3:4|2:3":[6,1,3,2], "2:2|3:1|6:4|1:3":[2,3,6,1]},
{"1:2|6:1|3:4|2:3":[1,6,3,2], "2:2|3:1|1:4|6:3":[2,3,1,6], "6:2|1:1|2:4|3:3":[6,1,2,3], "3:2|2:1|6:4|1:3":[3,2,6,1]},
{"2:2|3:1|5:4|4:3":[2,3,5,4], "4:2|5:1|2:4|3:3":[4,5,2,3], "3:2|2:1|4:4|5:3":[3,2,4,5], "5:2|4:1|3:4|2:3":[5,4,3,2]}
]

$("#panelBtn").on("click", "button", function(){
  if (isAnimating) return;
  isAnimating = true;
  var idA = +$(this).attr("data-animate");
  
  var current = $(".pt-page.pt-page-current");
  var curId = +current.attr("data-id");
  var nextId;
  if (prevA){
    var s = variants[curId-1];
	var l = [prevId, prevA].join(":");
	for (var k in s){
	  if (~k.indexOf(l)){
	    nextId = s[k][idA-1];
	    break;
	  }
	}
  } else {
    nextId = idA + 1;
  }
  prevA = idA;
  prevId = curId;
  var next = $(".pt-page.pt-page-"+nextId).addClass("pt-page-current");
  
  var outClass = "", inClass = "";
  switch(idA){
    case 1: 
	  outClass = 'pt-page-rotateCubeLeftOut pt-page-ontop';
	  inClass = 'pt-page-rotateCubeLeftIn';
	  break;
	case 2:
	  outClass = 'pt-page-rotateCubeRightOut pt-page-ontop';
      inClass = 'pt-page-rotateCubeRightIn';
      break;
	case 3:
	  outClass = 'pt-page-rotateCubeTopOut pt-page-ontop';
      inClass = 'pt-page-rotateCubeTopIn';
      break;
	case 4:
	  outClass = 'pt-page-rotateCubeBottomOut pt-page-ontop';
      inClass = 'pt-page-rotateCubeBottomIn';
      break;
  }
  
  current.addClass(outClass).on(...