延迟后页面加载时纯 CSS 书籍封面翻转

Question

我正在尝试在主要内容 div 上而不是整个页面上制作一个以“书籍封面”开头的页面转换。您可以在几秒钟内看到封面，这段时间足以让您一目了然。然后封面应该像任何精装书封面打开一样“打开”，抬起前面的一侧然后翻转出视图，就像放大内页一样，封面超出框架。

我看过很多教程和生成器，似乎有某种翻转的“圣杯”，其中项目在中心的 y 轴上水平翻转，就像翻转卡片一样。我找不到任何东西可以帮助我弄清楚如何从一侧翻到另一侧，就像精装书封面那样。

我无法提供代码片段，因为我真的不知道从哪里开始。我可以从无数教程页面之一加载无数示例代码中的一个，但它只是随机的，毫无意义的动画翻转代码，我对如何自定义以完成我需要的事情零理解，否则我会做它已经而不是在这里。

任何人都可以指出我正确的方向吗？即使您只是指向我一些通用动画翻转代码的教程页面，并简单地告诉我要更改哪些属性才能使其像精装书一样翻转打开，那也是完美的。

我想我可以弄清楚如何在使用延迟加载暂停后触发它，但是如果您有更好的解决方案，那也很受欢迎。

Answer 1

我会引导你完成它：

1) 首先，我们需要一个 HTML 结构，所以我们创建“页面”（实际上是页面边）：

<div class="page odd" id="cover">This is the cover</div>
<div class="page even" id="cover_back">Inside of the cover</div>
<div class="page odd" id="content">This is where the content goes...</div>

2) 其次，我们必须定位这些页面。奇数页应在中心，偶数页应垂直居中但在奇数页的左侧。这是通过以下 CSS 完成的：

.page {
    display: inline-block;
    z-index: 1;  /* the content page should go behind the cover pages */
    position: fixed;

    /* Size & Position */
    top: 50%;
    left: 50%;
    width: 360px;
    margin-left: -180px; /* half of width */
    height: 500px;
    margin-top: -250px; /* half of height */

    /* Add some styling, so the pages are opaque */ 
    background-color: #eee;

    /* Hide backface of each page/side, so we don't see it when turned */
    backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -webkit-backface-visibility: hidden;

    /* Set up animation */
    transition: transform 1.0s ease;
      -o-transition: transform 1.0s ease;
      -moz-transition: transform 1.0s ease;
      -webkit-transition: transform 1.0s ease;

    /* Hide content that overflows the page */
    overflow: hidden;
}

.page.even {
    margin-left: -540px; /* 1,5 x width to position it left of odd pages */
}

3) 翻开时，奇数面面向观众，偶数面则不（就像一本真正的书）。这可以通过使用来完成transform: rotateY()。奇数页在左侧翻转，偶数页在右侧翻转。所以我们将这些添加transform-origin到.page.odd和.page.even类：

.page.odd {
    transform-origin: 0% 0%;
      -o-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
      -moz-transform-origin: 0% 0%;
      -webkit-transform-origin: 0% 0%;
}

.page.even {
    transform-origin: 100% 0%;
      -o-transform-origin: 100% 0%;
      -ms-transform-origin: 100% 0%;
      -moz-transform-origin: 100% 0%;
      -webkit-transform-origin: 100% 0%;
    transform: rotateY(180deg); /* even pages start rotated (closed book) */
      -o-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
}

4）当您“翻页”时，必须旋转两侧（1 个奇数，1 个偶数），因此奇数面不再面向观众，偶数面将。您可以通过将.turn类添加到这些边来做到这一点。在这些.turn类中，您可以transform: rotateY()为奇数和偶数边设置适当的's：

.page.odd.turn {
    transform: rotateY(-180deg);
      -o-transform: rotateY(-180deg);
      -ms-transform: rotateY(-180deg);
      -moz-transform: rotateY(-180deg);
      -webkit-transform: rotateY(-180deg);
}
.page.even.turn {
    transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      -webkit-transform: rotateY(0deg);
}

5) 为了让一切看起来漂亮和流畅，我们添加perspective: 1200px;到body的 CSS 并确保html和body元素是width: 100%和height: 100%。

6）最后一步：我们希望封面页在内容页的前面，所以我们设置了z-index这些页的es：

#cover {
    z-index: 3;
}
#cover_back {
    z-index: 2;
}

为了让你开始，我在 CSS 中做了一个带有注释的例子来帮助你：https : //jsfiddle.net/PhilQ/b52dw42d/12/

编辑：在我的示例中翻页是通过单击按钮完成的，但您可能希望更改 JavaScript 以使用 asetTimeout()来触发.toggleClass('turn')X 毫秒之后。

编辑：我还举了一个例子，其中使用 CSS 发生转弯animation：https : //jsfiddle.net/PhilQ/b52dw42d/11/