CSS3实现翻书效果

HTML

　　　　<div class="desktop">
            <div class="book">
                <div class="page page-4">
                    <div class="front">封面</div>
                    <!-- <div class="back">背面3</div> -->
                </div>
                <div class="page page-3">
                    <div class="front">正面3</div>
                    <!-- <div class="back">背面3</div> -->
                </div>
                <div class="page page-2">
                    <div class="front">正面2</div>
                    <!-- <div class="back">背面2</div> -->
                </div>
                <div class="page page-1">
                    <div class="front">正面封面</div>
                    <!-- <div class="back">背面1</div> -->
                </div>
            </div>
        </div>

CSS

.desktop{
                background-size: cover;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 200px;
                height: 300px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
            .book{
                width: 200px;
                height: 300px;
                position: absolute;
                /* 倾斜30度角 */
                transform: rotateX(30deg);
                transform-style: preserve-3d;
                perspective: 1200;
            }
            .page{
                width: 100%;
                height: 100%;
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #eee;
                    
                /* 翻转轴left */
                transform-origin: left;
            }
            .page-1{
                background-color: #1D7DB1;

                /* 第一页翻转 */
                animation: turning1 5s linear 1;
                /* 保持动画结束时的状态 */
                animation-fill-mode: forwards;
            }
            .page-2{
                /* 第二页延时5s翻转 */
                animation: turning2 5s 5s linear 1;
                animation-fill-mode: forwards;
            }
            .page-3{
                /* 第三页延时10s翻转 */
                animation: turning3 5s 10s linear 1;
                animation-fill-mode: forwards;
            }
            .page-4{
                background-color: #1D7DB1;
            }
            @keyframes turning1 {
                to{
                    transform: rotateY(-160deg);
                    z-index: 1;
                }
            }
            @keyframes turning2 {
                to{
                    transform: rotateY(-160deg);
                    z-index: 2;
                }
            }
            @keyframes turning3 {
                to{
                    transform: rotateY(-160deg);
                    z-index: 3;
                }
            }