CSS3 を使って本のページめくり効果を実現するサンプルコード

重要なポイント:
1. CSS3 3Dアニメーションをマスターする
2. ページめくり後のページ内容の変更を解決する方法
3. 本を中央に置く方法

コードの概要

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<スタイル>
    。本{
        マージン: 自動;
        上マージン: 2rem;
        変換: translate(0,0);
        パースペクティブ: 5000px;
        最大幅: 40%;
        高さ: 800ピクセル;
        位置: 相対的;
        遷移:すべて 1 の緩和;
    }
    。ページ{
        位置: 絶対;
        幅: 100%;
        高さ: 100%;
        上: 0;
        右: 0;
        背景色: ピンク;
        カーソル: ポインタ;
        遷移:すべて 1 の緩和;
        変換の原点: 左中央;
        変換スタイル: 3D を保持します。
    }
    。アクティブ{
        zインデックス: 1;
    }
    .ページをめくる{
        変換:Y回転(-180度)
    }
    .back,.front{
        テキスト配置: 中央;
        位置: 絶対;
        背面の可視性: 非表示;
        幅: 100%;
        高さ: 100%;
    }
    。戻る{
        変換:Y回転(180度)
    }
</スタイル>
<本文>
    <div class="book">
        <div class="ページアクティブ">
            <div class="front">カバー</div>
            <div class="back">1</div>
        </div>
        <div class="page">
            <div class="front">2</div>
            <div class="back">3</div>
        </div>
        <div class="page">
            <div class="front">4</div>
            <div class="back">5</div>
        </div>
        <div class="page">
            <div class="front">6</div>
            <div class="back">テール</div>
        </div>
    </div>
</本文>
<スクリプト>
    pages = document.getElementsByClassName('page') とします。
    book = document.getElementsByClassName('book')[0] とします。
    関数bookMove(drect){
        if(drect==='right'){
            book.style.transform = 'translate(50%,0)'
        }そうでない場合、(drect==='left'){
            book.style.transform = 'translate(0,0)'
        }それ以外{
            book.style.transform = 'translate(100%,0)'
        }
    }
    for(let i = 0;i<pages.length;i++){
        pages[i].addEventListener('click',()=>{
            ページ[i].classList.contains('flipped')の場合
                pages[i].classList.remove('反転')
                ページ[i].classList.add('アクティブ')
                もし(i===0){
                    本を左へ移動します
                }
                if (pages[i].nextElementSibling!==null){
                    ページ[i].nextElementSibling.classList.remove('active')
                }それ以外{
                    本を右に動かす
                }
            }それ以外{
                ページ[i].classList.add('反転')
                ページ[i].classList.remove('active')
                もし(i===0){
                    本を右に動かす
                }
                if (pages[i].nextElementSibling!==null){
                    ページ[i].nextElementSibling.classList.add('active')
                }それ以外{
                    bookMove('close')
                }
            }
        })
    }
</スクリプト>
</html>

要点分析
CSS3 アニメーションプロパティの説明:
perspective: 5000px; これは perspective 属性であり、簡単に言えば「近くは大きく、遠くは小さい」効果を実現する属性と言えます。ここで注意すべき点は、3D 変換を受ける要素の親要素に perspective を設定する必要があることです。3D 変換を受ける要素は、親要素を背景としてのみ perspective 変換の効果を見ることができるためです。
transition:all 1s easy; ここにトランジションプロパティがあります。トランジション時間と適用されるイージング関数を設定できます。
transform-origin: left center; このプロパティは、変換プロパティの開始点を設定できます。つまり、左中心をポイントとしてy軸を中心に回転します。
transform-style: preserve-3d; このプロパティにより、このプロパティを持つ要素の子要素は、子要素も 3D 変換を受けることを条件に、親要素に基づいて同じパースペクティブを表示できるようになります。

ページコンテンツの表示の問題を解決します。
backface-visibility: hidden; 180 度回転した要素を非表示にします。つまり、裏面が見えなくなります。このプロパティを使用すると、ページ 1 を 180 度回転させて非表示にし、-180 度から 0 度に回転したページ 2 を表示することで、本のコンテンツを切り替えることができます。

本のページを中央に配置する問題を解決するには:
transform: translate(0,0) translation属性を通じて、この問題を解決するために残っているのは、jsでクリックイベントを追加し、要素のスタイルを制御してページめくりアニメーションを実現することです。

CSS3 で本のページめくり効果を実装するサンプルコードに関するこの記事はこれで終わりです。CSS3 の本のページめくりに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL の重要なログファイルの包括的なインベントリ

>>: Bootstrap が人気な 11 の理由