Question

我试图进行一个以＆＃34;书籍封面开头的页面转换＆＃34;仅在主要内容div上，而不是整个页面。您可以看到封面几秒钟，足够长的时间可以看一眼。那封面应该打开＆＃34;打开＆＃34;就像任何精装书封面打开一样，向前抬起一侧然后翻转出视图，好像放大了内页并且封面不在框架内。

我看了很多教程和发电机，似乎有某种圣杯＆＃34;翻转，其中项目在其中心的y轴上水平翻转，就像翻转卡片一样。我无法找到任何可以帮助我弄清楚如何从一侧翻转到另一侧的东西，就像精装书封面一样。

我无法提供代码段，因为我实际上并不知道从哪里开始。我可以从众多教程页面中的一个加载一个极其繁琐的示例代码中的一个，但它只是随机的，无意义的动画翻转代码，我将无法理解如何自定义以执行我需要的操作，否则我会#d; d已经做到了，而不是在这里。

有人能指出我正确的方向吗？即使您只是指向一个通用动画翻转代码的教程页面，只需告诉我要修改哪些属性以使其像精装书一样翻开，这将是完美的。

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

Answer 1

我将引导您完成它：

1）首先，我们需要一个HTML结构，因此我们创建了＆＃39;页面＆＃39; （或实际页面）：

<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）为了让所有内容都变得美观流畅，我们将perspective: 1200px;添加到body的CSS中，并确保html和body元素为width: 100%和height: 100%。

6）最后的触摸：我们希望封面页面放在内容页面前面，因此我们设置这些页面的z-index个：

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

为了让您开始，我在CSS中提供了一些示例，以帮助您：https://jsfiddle.net/PhilQ/b52dw42d/12/

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

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

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

1 个答案: