点击事件被旋转的元素

Question

我正在尝试学习一些关于CSS动画的内容，并决定尝试制作一本翻页的书（固定动画不可拖动）

我让动画运作得很好，现在我想把页面堆叠在一起形成一本书。从页面翻转时我可以看出，外部div仍然占据原始空间，阻止我在基础页面上的点击事件。

我怎样才能解决这个问题？

这是一个展示我的问题的插件http://plnkr.co/edit/2fPMgUvEKhdJLxJOOeBg
和相关的CSS

.flipPage {
  animation: flip-page 1s 0s 1 linear alternate;
  animation-fill-mode: forwards;
}
.flipPageBack {
  animation: flip-page-back 1s 0s 1 linear alternate;
  animation-fill-mode: forwards;
}
.flipper {
  width:200px;
  height:200px;

  transform-origin: right;
  transform-style: preserve-3D;

}
.flipper > .front, .back {
  position:absolute;
  width: inherit;
  height: inherit;
  backface-visibility: hidden;
}
.flipper > .front {
  z-index: 2;
  background-color:coral;
    box-shadow: inset -10px 0px 10px 0px rgba(0,0,0,0.25);
}
.flipper > .back {
  background-color:lightcoral;
  transform: rotatey(180deg);
  box-shadow: inset 10px 0px 10px 0px rgba(0,0,0,0.25);
}