CSS Flip Animation类似于Flipboard

Question

我一直在关注本教程：https://davidwalsh.name/css-flip并遇到了一些问题。

＆＃13;

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

一切正常，除非我旋转图像，它会翻转并离开页面。我希望内容保持与翻转前相同的位置，一旦翻转。

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

此外，我最终还想添加一个翻转动画，就像翻转动画一样，扩展这个例子，并想知道它是否可行。任何教程/代码示例都将非常感谢！

Answer 1

只需添加＆＃34; vertical＆＃34; class on＆＃34; flip-container＆＃34; div。