/**************************************************
Credit: Dhanish
https://codepen.io/dhanishgajjar/pen/bjaYYo
**************************************************/

body {
  perspective: 1200px;
}

.book {
  transform-style: preserve-3d;
  position: absolute;
	width: 240px;
  height: 300px;
  backface-visibility: visible;
}

.book .page, .book .front, .book .back {
  transform-style: preserve-3d;
  position: absolute;
  width: 100%;
  height: 100%;
	top: 0; left: 0;
  transform-origin: left center;
  transition: transform .5s ease-in-out;
}

.book .front, .book .back { top: 4px; }
.book .page { top: 3px; }

.book img { height: 100%; }
.book .front img, .book .back img {
	top: -2px; left: 0; 
}
/* flip first half of pages so they show up correctly */
.book .page1 img, .book .page3 img, .book .page5 img,  { transform: scaleX(-1); }

.pageInner img { filter: none; }

.book:hover, .book:focus-visible {
	.front { transform: rotateY(-160deg) scale(1.1); }
	
	.page1 { transform: rotateY(-154deg) scale(1.1); }
	.page2 { transform: rotateY(-26deg) scale(1.1); }
	.page3 { transform: rotateY(-149deg) scale(1.1); }
	.page4 { transform: rotateY(-31deg) scale(1.1); }
	.page5 { transform: rotateY(-146deg) scale(1.1); }
	.page6 { transform: rotateY(-34deg) scale(1.1); }
	
	.pageInner { transform: rotateY(-36deg) scale(1.1); } /* right side inner (top) */
	
	.pageInner.flip { transform: rotateY(-144deg) scale(1.1); } /* left side inner page (top) */
	.pageInner.flip ~ .pageInner.flip { transform: rotateY(-144.2deg) scale(1.1); } /* left side inner (under) */
	
	.back { transform: rotateY(-20deg) scale(1.1); }
}