CSS三、jQuery實現3D翻書動畫

使用CSS3 ，jQuery實現點擊翻書動畫效果，完整效果可在firefox中查看

HTML

<div class="desktop">
            <div class="book">
                <div class="page bg end">
                    <div class="front">謝謝閱讀</div>
                </div>
                <div class="page">
                    <div class="back">
                        <p>JavaScript很重要</p>
                    </div>
                    <div class="front">JavaScript </div>
                </div>
                <div class="page">
                    <div class="back">
                        <p>CSS3很是強大</p>
                    </div>
                    <div class="front">CSS3</div>
                </div>
                <div class="page">
                    <div class="back">
                        <p>HTML5新特性不錯哦</p>
                    </div>
                    <div class="front">HTML5</div>
                </div>
                <div class="page bg">
                    <div class="back">
                        <p>做者：M先生</p>
                        <p>我的博客：</p>
                        <a href="https://home.cnblogs.com/u/mp1994/">https://home.cnblogs.com/u/mp1994/</a>
                    </div>
                    <div class="front">前端技術棧</div>
                </div>
            </div>
        </div>

CSS

/* 簡單翻書動畫開始 */
            .desktop{
                background-size: cover;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 300px;
                height: 400px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
            .book{
                width: 300px;
                height: 400px;
                position: absolute;
                /* 傾斜30度角 */
                transform: rotateX(30deg);
                transform-style: preserve-3d;
                perspective: 1200;
                font-size: 30px;
                color: #9ACD32;
                box-shadow: 0 6px 10px 0 rgba(0,0,0,.6);
            }
            .page{
                width: 100%;
                height: 100%;
                position: absolute;
                background-color: #eee;
                    
                /* 翻轉軸left */
                transform-origin: left;
                /* backface-visibility: hidden; */
                border-left: 2px solid saddlebrown;
                box-sizing: border-box;
                z-index: ;
            }
            .bg{
                background-color: #1D7DB1;
            }
            .end{
                z-index: -999999;
            }
            /* 正面 */
            .front{
                position: absolute;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: inherit;
            }
            /* 背面 */
            .back{
                position: absolute;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background-color: inherit;
                color: red;
                font-size: 12px;
                font-weight: bold;
                transform: rotateY(180deg);
            }
            @keyframes turning {
                to{
                    transform: rotateY(-160deg);
                }
            }
            @keyframes resetBook{
                from{
                    transform: rotateY(-160deg);
                }
                to{
                    transform: rotateY(0deg);
                }
            }
            
/* 簡單翻書動畫結束 */

JavaScript

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(function () {
            const $page = $('.page')
            let isClick = true
            $page.click(function (e){
                // 動畫執行時禁止再次點擊
                if (isClick) {
                    isClick = false
                    setTimeout( () => {
                        isClick = true
                    }, 2000)
                    
                    // 獲取當前點擊元素下標
                    const index = $(this).index()
                    const $childFront = $(this).children('.front')
                    const $childBack = $(this).children('.back')
                    
                    // 因爲背部封面(下標0)是不動的 所以判斷下標大於0才增減class
                    if (index > 0) { 
                        // 判斷是否已經翻過 已經翻過則翻回
                        if ( $(this).hasClass('flag') ) {
                            // 設置css執行動畫效果
                            $(this).css({
                                "animation": "resetBook 2s linear 1"
                            })
                            // 轉到一半時 設置正反面 z-index
                            setTimeout(() => {
                                $(this).css({
                                    "z-index": index
                                })
                                $childFront.css({'z-index': index})
                                $childBack.css({'z-index': index - 1})
                            }, 1000)
                            
                            // 去除標記
                            $(this).removeClass('flag')
                            
                        } else {
                            // 設置css執行動畫效果
                            $(this).css({
                                "animation": "turning 2s  linear 1",
                                "animation-fill-mode": "forwards",
                            })
                            
                            // 動畫完成後將設置翻轉後的z-index 
                            // 兼容chrome瀏覽器
                            const isChrome = navigator.userAgent.indexOf('Chrome')
                            if (isChrome > -1) {
                                setTimeout(() => {
                                    $(this).css({
                                        'z-index': index, 
                                        "box-shadow": "0 6px 10px rgba(0,0,0,.2)"
                                    })    
                                },2000)
                            } else {
                                setTimeout(() => {
                                    $(this).css({
                                        'z-index': index * -1, 
                                        "box-shadow": "0 6px 10px rgba(0,0,0,.2)"
                                    })    
                                },2000)
                            }
                            // 轉到一半時 設置正反面 z-index
                            setTimeout(() => {
                                $childFront.css({'z-index': index})
                                $childBack.css({'z-index': index + 1})
                            }, 1000)
                            
                            // 添加標記
                            $(this).addClass('flag')
                        }
                    }    
                }
            })
        })
    </script>

效果以下：