为什么我的书封面正面翘曲？

Question

我有一本用过渡创建的书。它使用3个div创建，一个用于背面，一个背面，两个用于正面。前面的第一个div用于盖子的前部，而另一个用于盖子的后部。当你将鼠标悬停在书上时，前翻开，显示div有一类背部和后盖。

问题是盖子前面的一秒钟，这是一个蓝色的div显示在后面作为它的开启和关闭 - 为什么它这样做，我该如何解决？

*{
  text-align: center;
  line-height: 200px;
}
.book{
  margin: 50px auto;
  position: relative;
  perspective: 300px;
  perspective-origin: right bottom;
}
.book:hover .front{
    transform: rotatey(-180deg);
}
.book .front{
  transition: transform 1s ease-in-out;
  transform-origin: left;
  background-color: blue;
}
.book,.front,.front-front,.front-back,.back{
  width: 130px;
  height: 200px;
  background-color: red;
  transform-style: preserve-3d;
}

.front-front{
   z-index:1;
   background-color: blue;
}
.back{
  z-index: -1;
}
.front-front,.front-back,.front{

}
.front-front,.front-back,.back,.front{
  position: absolute;
}
.front-back{
  transform: rotatey(180deg);
}

<div class="book">
  <div class="front">
    <div class="front-front">
    front
    </div>
    <div class="front-back">
    back
    </div>
  </div>
  <div class="back">
  back of book
  </div>
</div>