CSS3 を使用して 3D のめくり本の効果を実現する方法-CSSチュートリアル-php.cn

CSS3 を使用して 3D のめくり本の効果を実現する方法

不言

リリース： 2018-06-25 16:56:13

オリジナル

3315 人が閲覧しました

この記事では、CSS3 の新しいプロパティであるアニメーションと変換に基づいて、同様のフリップブック効果を実現します。興味のある方は参考にしてください。、レンダリング: (スタイルは少し醜いですが、無視できます。効果は良好です。変更を容易にするために後で他のプロジェクトに追加されます 0.0)

回転の効果に似ています本来の意味は、一度クリックした後、setIntervalを使用して本のページをめくるアニメーションを制御することですが、本のページが180度回転するとき、setIntervalをクリアします。以前に 180 度回転されていない本のページは、前のアクションを続行できません。setInterval をクリアする方法を使用できますが、アニメーション効果がよくないように感じます。もちろん、他の解決策もあります。、しかし、CSS3 がアニメーションを提供していることに突然気づきました。アニメーションを追加することで、この問題を直接回避できます。デフォルトでは、アニメーションは毎回実行されるので、いつでも実行できます。接続されたドットが表示され、図のように各ページが自然に回転します。以下のコードと実装手順を貼り付けます。

注: この例の 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 部分: (の値を変更することで)変形時に回転させると、本のページを反転する効果が得られます)

<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にアニメーション属性を追加する実装です)

<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 にアニメーション属性を追加することです。アニメーションの詳細な説明については、API を確認する必要があります。

互換性の問題のため、ここでのより良い解決策は、アニメーションの代わりにクラスを追加することです。より多くのブラウザに適応するには、プレフィックス -webkit-、-moz- · · · · · · を追加する必要があります。これらをクラスに追加してクラスを直接追加するか、関数を作成してそれをカプセル化し、必要な文字列を直接出力できるようにします。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項: カード回転切り替え効果を実現するための

js と CSS3

CSS3 3D 回転回転効果の使用方法の紹介

以上がCSS3 を使用して 3D のめくり本の効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。