純css實現翻書效果

前言

最近研究了一下css3的3D效果，寫了幾個demo，寫篇博客總結一下實現的經過。PS:如果對transform-origin/perspective/transform-style這些概念還不了解，可以先看看張鑫旭大神寫的這篇通俗易懂的文章：好吧，CSS3 3D transform變換，不過如此！。不過就是里面大神配的圖片有點污，不適合在辦公室看（手動捂臉）。

效果圖

先來看看實際的效果圖：

翻書

旋轉方塊

翻書效果實現過程

html結構如下：

<div class="perspective">
    <div class="book-wrap">
        <div class="page book-content">end</div>
        <div class="page book-content book-content1">第三頁</div>
        <div class="page book-content book-content2">第二頁</div>
        <div class="page book-content book-content3">第一頁</div>
        <div class="page book-cover">封面</div>
    </div>
</div>

首先在最外層設置一個perspective和transform-style，設置子元素為3D透視，並且設置眼睛距離屏幕的距離為800px。

.perspective {
    margin-top: 100px;
    perspective: 800px;
    transform-style: preserve-3d;
}

接下來是book-wrap，設置width和height都為300px，並且X軸旋轉30deg，這樣看着更有立體感，設置子元素為3D透視。

.book-wrap {
    width: 300px;
    height: 300px;
    position: relative;
    margin: 0 auto;
    transform: rotateX(30deg);
    transform-style: preserve-3d;
}

然后是page，設置絕對定位並且left和top為0，將所有的page重疊起來.元素旋轉的基准位置為left,transform-origin: left

.page {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: left;
    border: 1px solid #1976D2;
}

接下來就是使用animation實現動畫效果了，我們這里的實現思路是封面頁先開始旋轉，然后過一秒后是第一頁開始旋轉，再過一秒是第二頁開始旋轉，最后是第三頁。一個周期設置為6秒，注意每頁的延遲時間 + 旋轉時間 === 6s

.book-content {
    background-color: #fff;
    color: #33363C;
}
.book-cover {
    background-color: #1976D2;
    color: #ffffff;
    animation: roll 6s ease 0s 2 alternate;
}
.book-content1{
    animation: roll 3s ease 3s 2 alternate;
}
.book-content2 {
    animation: roll 4s ease 2s 2 alternate;
}
.book-content3 {
    animation: roll 5s ease 1s 2 alternate;
}

這樣就使用純css實現了一個完整的翻書效果，源碼地址https://github.com/heavenYJJ/css3/blob/master/translate-book.html

旋轉方塊

路過webpack官網的時候看見他的logo，覺得很好看，然后就照着他的樣子擼了一個出來。使用css3畫正方體網上有很多文章，這里我們就不具體描述了，直接貼出源碼地址https://github.com/heavenYJJ/css3/blob/master/cube.html。