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

Question

我正在尝试仅在主要内容 div 而不是整个页面上进行以“书籍封面”开始的页面转换。您可以看到封面几秒钟，足以看清它。然后封面应该像打开任何精装书封面一样“打开”，抬起前面的一侧然后翻出视野，就像放大内页一样，封面不在框架内。

我看了很多教程和生成器，似乎有某种翻转的“ chalice ”，其中元素在中心的 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():

.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) 为了让一切看起来漂亮流畅，我们在 body 的 CSS 中添加 perspective: 1200px; 并确保 html 和 body 元素是 width: 100% 和 height: 100%。

6) 最后一点:我们希望封面页位于内容页之前，因此我们设置这些页面的 z-indexes:

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

首先，我在 CSS 中做了一个带有注释的示例来帮助您解决问题:https://jsfiddle.net/PhilQ/b52dw42d/12/

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

编辑:我还做了一个使用 CSS animation 进行转弯的示例:https://jsfiddle.net/PhilQ/b52dw42d/11/