html - CSS Flip Animation类似Flipboard

我一直在学习这个教程：https://davidwalsh.name/css-flip并且遇到了一些问题。

.flip-container {
  perspective: 1000px;
}
/* flip the pane when hovered */

.flip-container:hover .flipper,
.flip-container.hover .flipper {
  transform: rotateX(180deg);
}
.flip-container,
.front,
.back {
  width: 320px;
  height: 480px;
}
/* flip speed
goes here */

.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
/* hide back of pane during swap */

.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
/* front pane, placed above back */

.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateX(0deg);
}
/* back, initially hidden pane */

.back {
  transform: rotateX(180deg);
}
.vertical.flip-container {
  position: relative;
}
.vertical .back {
  transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
  transform-origin: 100% 213.5px;
  /* half of height */
}
.vertical.flip-container:hover .flipper {
  transform: rotateX(-180deg);
}

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      <!-- front content -->
      <h1><center>This is the header</center></h1>
      <h4><center>Some useful info</center></h4>
      <p>
        <center>Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.Bootstrap (currently v3.3.7) has a few easy ways to quickly
          get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level
          and use case. Read through to see what suits your particular needs.Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular
          needs.Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</center>
      </p>

    </div>
    <div class="back">
      <!-- back content -->

      <h1><center>Title</center></h1>
      <h4><center>Sub</center></h4>
      <p>
        <center>Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.Bootstrap (currently v3.3.7) has a few easy ways to quickly
          get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level
          and use case. Read through to see what suits your particular needs.Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular
          needs.Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</center>
      </p>
    </div>
  </div>
</div>

一切都正常工作，除了我旋转图像时，它会翻动并离开页面。我想让内容保持在翻页之前的位置，一旦翻页。

翻页后，大部分内容都会翻页：

另外，我最终想在这个例子中添加一个类似flipboard的flip动画扩展，并想知道它是否可能。任何教程/代码示例将非常感谢！

最佳答案

只需在“vertical”class上添加“flip-container”div。