首頁 >web前端 >css教學 >如何利用CSS3實現3D翻書效果

如何利用CSS3實現3D翻書效果

不言
不言原創
2018-06-25 16:56:133287瀏覽

這篇文章主要介紹了CSS3實現3D翻書效果,基於CSS3新屬性Animation及transform實現類似翻書效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下

#先上效果圖:(樣式有點醜,可以忽略一下下,效果出來了就好,後期加到其他項目中方便更改0.0)

類似翻書效果,原本的意思是使用JS來控制的,點擊一次之後使用setInterval去控制書頁翻過去的動畫,當書頁翻轉180°之後,清除掉setInterval,但當我連續點擊,那之前沒有翻轉180°的書頁將無法繼續完成之前的動作,可以用清除setInterval的方式,但總感覺動畫效果不好,當然還有其他解決辦法,但突然想到,CSS3為我們提供了animation,我們為什麼不去使用使用呢,只要為加上animation動畫可以直接避免這個問題,animation動畫預設是每次都執行完動畫,所以,當出現連點的時候,就會像圖中看到的那樣,每一頁都自然翻頁,下面貼上程式碼,及實作步驟:
註:本實例JS部分皆以原生JS編寫,不善用原生JS的,可用jQuery等對三方框架改寫
html部分:(這部分真心····· ·,算了,醜就醜吧~.~)

<body>
    <!-- 所展示的书的内容 -->
    <p class="book">
        <p class="page">
            <span>1</span>
            <span>2</span>
        </p>
        <p class="page">
            <span>3</span>
            <span>4</span>
        </p>
        <p class="page">
            <span>5</span>
            <span>6</span>
        </p>
        <p class="page">
            <span>7</span>
            <span>8</span>
        </p>
        <p class="page">
            <span>9</span>
            <span>10</span>
        </p>
        <p class="page">
            <span>11</span>
            <span>12</span>
        </p>
        <p class="page">
            <span>13</span>
            <span>14</span>
        </p>
        <p class="page">
            <span>15</span>
            <span>16</span>
        </p>
        <p class="page">
            <span>17</span>
            <span>18</span>
        </p>
        <p class="page">
            <span>19</span>
            <span>20</span>
        </p>
    </p>
    <!-- 用来控制上一页和下一页操作 -->
    <input type="button" value="上一页" id="before"/>
    <input type="button" value="下一页" id="after"/>
</body>

CSS部分:(透過改變transform中rotatey的值,來實現書頁的翻轉效果)

<style>   
        .book{   
            width: 460px;   
            height: 300px;   
            position: relative;   
            margin: 150px 400px;   
            -webkit-transform-style: preserve-3d;   
            -moz-transform-style: preserve-3d;   
            -ms-transform-style: preserve-3d;   
            transform-style: preserve-3d;   
            transform: rotatex(30deg);   
        }   
        .page{   
            width: 230px;   
            height: 300px;   
            border: 1px solid #666;   
            position: absolute;   
            rightright: 0;   
            transform-origin: left;   
            transform-style: preserve-3d;   
            backface-visibility:hidden;   
            font-size: 60px;   
            text-align: center;   
            line-height: 300px;   
        }   
        .page span{   
            display: block;   
            width: 100%;   
            position: absolute;   
            background-color: #00FFFF;   
        }   
        .page span:nth-child(2){   
            transform: rotatey(-180deg);   
            backface-visibility:hidden;   
        }   
        /*以下两个动画可以只使用第一个,animation中有reverse,可以反向执行动画, 
            使用时需要在JS中点击上一页时添加改属性值*/
        /*翻书下一页的动画*/
        @keyframes page {   
            0%{   
                transform: rotatey(0deg);   
            }   
            100%{   
                transform: rotatey(-180deg);   
                z-index: 10;   
            }   
        }   
        /*翻书上一页的动画*/
        @keyframes page1 {   
            0%{   
                transform: rotatey(-180deg);   
                z-index: 10;   
            }   
            100%{   
                transform: rotatey(0deg);   
            }   
        }   
    </style>

JS部分(JS部分主要實現點擊上/下一頁時,為對應的p添加animation屬性)

<script>   
    var before = document.querySelector("#before");   
    var after = document.querySelector("#after");   
    var book = document.querySelector(".book");   
    var page = document.getElementsByClassName("page"); 7     rotate();   
    function rotate(){   
        var middle = 0;12         for(var z=0;z<book.children.length;z++){   
            page[z].style.zIndex = book.children.length-z;   
        }   
        after.onclick = function(){   
            if(middle != book.children.length){   
                page[middle].style.animation = "page 1.5s linear 1 forwards";   
                middle++;   
            }else{   
                middle = book.children.length;   
            }   
        };   
        before.onclick = function(){   
            if(middle != 0){   
                page[middle-1].style.animation = "page1 1.5s linear 1 forwards";   
                middle--;   
        }else{   
            middle = 0;   
            }   
        }   
    }   
</script>

關於最後JS部分,主要作用在於,當點擊上/下一頁時,為對應的p添加animation屬性,具體animation的詳解,還是需要查看API。
 
介於相容性的問題,這裡比較好的解決方法是添加class,而不是去添加animation,為適應更多瀏覽器,需要添加前綴-webkit-、-moz-···· ···,所以在一個類別中寫好這些東西,直接添加類別就可以了,或者寫一個函數,封裝好,能直接輸出需要的字串就好。

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

js與CSS3實作卡牌旋轉切換效果

CSS3 3D旋轉rotate效果的使用介紹

以上是如何利用CSS3實現3D翻書效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn