*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Sans-Serif;
  background-color: powderblue;
}

.book{
  border: 1px solid black;
  position: relative;
  width: 1100px;
  height: 700px;
  transform-style: preserve-3d;
  transform:perspective(1200px) rotateX(30deg) ;
}

.front,
.back,
.flipper{
  backface-visibility: hidden;
  background-color: white;
  position: absolute;
  width: 50%;
  transform-origin: 0% 50%;
  transform: rotateY(180deg);
  height: 100%;
  top: 0;
}

.flipper{
  background-color:purple;
  width:10%;
  left:90%;
  transform-origin: -500% 50%;
  z-index: 1;
}

.front {
  left: 50%;
}

.back {
  left: 0%;
  transform-origin: 100% 50%;
}

.front-content,
.back-content{
  width:100%;
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
}