html - 类似于 Flipboard 的 CSS 翻转动画

Question

我一直在关注本教程: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>

一切正常，除了当我旋转图像时，它会向上翻出页面。一旦翻转，我希望内容保持在翻转前的相同位置。

在它翻转之后，大部分内容都会从页面上翻转:

另外，我最终想添加一个像翻转动画一样的翻转板扩展这个例子，我想知道这是否可能。任何教程/代码示例将不胜感激!

Answer 1

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