3D翻页动画效果

之前，已经使用了 transform 和transition 相结合来制作3D动画效果，下面我们用新的方法来制作3D翻页效果。

<ul class="book">
    <li class="cover">第一页</li>
    <li class="page1">第二页</li>
    <li class="page2">第三页</li>
</ul>

编写CSS样式，设置book在页面中显示。

    *{
        margin: 0;
        padding: 0;
    }
    .book{
        width: 300px;
        margin: 0 auto;  /*设置左右居中 实为 margin:0 auto 0 auto  */
        position: relative;
    }

• 这里学习一个新的居中方法：margin: 0 auto ：https://blog.csdn.net/weixin_39068791/article/details/80635316

---

对于三个 li 元素，设置其为绝对定位，并设置其为300x400。为每一页设置阴影，加强书页的边缘质感。并设置布偶听的z-index：

    li{
        position: absolute;
        font-size: 0;
        /*依据图片的分辨率而设*/
        width: 300px;
        height: 400px;
        box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.1);
    }
    .cover{
        background: url(cover.png);
        z-index: 0;
    }
    .page1{
        background: url(page.png);
        left: -300px;
        z-index: -1;
    }
    .page2{
        background: url(page2.png);
        z-index: -2;
    }

上面代码设置了页面的顺序，预先让第二页向左移动300像素，现在页面如下：

---

接着，为前两页设置默认的旋转角度和旋转点，否则页面将围绕其中轴旋转，不能形成翻页的效果。对于第一页，它默认是不需要旋转的，当翻页时，旋转点应该位于其左侧终点；对于第二页而言，它默认状态下是被翻过的状态，因此要事先将其Y轴旋转180度，同时使其旋转点位于右侧中点。

    .cover{
        transform-origin: left center;
    }
    .page1{
        transform: rotateY(180deg);
        transform-origin: right center;
    }

---

准备页面设置好以后，可以为本书添加transition动画：在鼠标滑过时，是第一页Y轴旋转至负180度，同时第二页旋转翻至0度，从而实现翻页效果。此外，为了使翻转的第一页不再覆盖在第二页之上，我们还需要设置backface-visibiity属性为hidden：

    li{
        backface-visibility: hidden;   /*使得翻转到反面时不显示*/
        transform: transform 3s;
    }
    .book:hover .cover{
        transform: rotateY(-180deg);
    }
    .book:hover .page1{
        transform: rotateY(0deg);
    }

• backface-visibility：属性定义当元素不面向屏幕时是否可见。https://www.w3school.com.cn/cssref/pr_backface-visibility.asp

为了显示3D效果，，增加以下样式：

    .book{
        perspective: 1500px;
        transform-style: preserve-3d;
        transform: rotateX(10deg);
    }

• perspective：设置元素据视图的距离。https://www.w3school.com.cn/cssref/pr_perspective.asp
• transform-style：属性规定如何在 3D 空间中呈现被嵌套的元素。https://www.w3school.com.cn/cssref/pr_transform-style.asp

设置book的 perspective 属性为1500像素（之前也用到过），以增加透视景深。同时设置了 transform-style 属性为preserve-3d，以产生3D透视效果。最后，使book元素在x轴上略微旋转10度，以使透视效果更佳。