BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[css3]本のページをめくるような効果を実現するcss3サンプルコード

2022-01-26 05:23:09

キーポイント
1.css3 3dアニメーションマスター
2. 反転後にページ内容が変わる場合の対処法
3. 常に本の中心を保つ方法

コードの概要 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .book{
        margin: auto;
        margin-top: 2rem;
        transform: translate(0,0);
        perspective: 5000px;
        max-width: 40%;
        height: 800px;
        position: relative;
        transition:all 1s ease;
    }
    .page{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        background-color: pink;
        cursor: pointer;
        transition:all 1s ease;
        transform-origin: left center;
        transform-style: preserve-3d;
    }
    .active{
        z-index: 1;
    }
    .page.flipped{
        transform:rotateY(-180deg)
    }
    .back,.front{
        text-align: center;
        position: absolute;
        backface-visibility: hidden;
        width: 100%;
        height: 100%;
    }
    .back{
        transform:rotateY(180deg)
    }
</style>
<body>
    <div class="book">
        <div class="page active">
            <div class="front">cover</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">endface</div>
        </div>
    </div>
</body>
<script>
    let pages = document.getElementsByClassName('page')
    let book = document.getElementsByClassName('book')[0]
    function bookMove(drect){
        if(drect==='right'){
            book.style.transform = 'translate(50%,0)'
        }else if(drect==='left'){
            book.style.transform = 'translate(0,0)'
        }else{
            book.style.transform = 'translate(100%,0)'
        }
    }
    for(let i = 0;i<pages.length;i++){
        pages[i].addEventListener('click',()=>{
            if(pages[i].classList.contains('flipped')){
                pages[i].classList.remove('flipped')
                pages[i].classList.add('active')
                if(i===0){
                    bookMove('left')
                }
                if(pages[i].nextElementSibling!==null){
                    pages[i].nextElementSibling.classList.remove('active')
                }else{
                    bookMove('right')
                }
            }else{
                pages[i].classList.add('flipped')
                pages[i].classList.remove('active')
                if(i===0){
                    bookMove('right')
                }
                if(pages[i].nextElementSibling!==null){
                    pages[i].nextElementSibling.classList.add('active')
                }else{
                    bookMove('close')
                }
            }
        })
    }
</script>
</html>

要旨分析
css3のアニメーションのプロパティの説明です。
perspective: 5000px; これは perspective プロパティで、簡単に言うと「近くて大きい、遠くて小さい」効果を実現するプロパティと考えることができます。
3次元変換が行われるため、3次元変換された要素の親要素に遠近感を設定する必要があることに注意してください。
親要素が透視変換の背景として使用されている場合にのみ、その効果を確認することができます。
transition:all 1s ease; これはover属性で、適用されるオーバータイムとジョグ機能を設定します。
transform-origin: left center;; このプロパティは、transformプロパティの開始点を設定します。つまり、左中心をポイントとしてY軸の周りを回転します。
transform-style: preserve-3d;; このプロパティは、このプロパティを持つ要素の子も3Dで変換されている場合、同じ親ベースの視点を持つことができるようにします。

ページ内容の表示に関する問題を解決する。
backface-visibility: hidden; 180度回転した要素を非表示にする、つまりバックフェイスを表示しない。
このプロパティを使って、180度回転した後にページ1を非表示にし、-180度から0度回転した後にページ2を表示することで、本の内容を入れ替えることが可能です

本をページの中央に配置する問題を解決するため。
transform: translate(0,0) プロパティをパンニングすることでこの問題を解決します。
あとは、ページめくりアニメーションを実現するために、要素のスタイルを制御する js を使ってクリックイベントを追加するだけです。

今回はブックページ効果を実現するcss3サンプルコードをご紹介しましたが、より関連するcss3ブックページのコンテンツは、スクリプトハウスの過去記事を検索するか、以下の関連記事を引き続きご覧ください！今後ともスクリプトハウスをよろしくお願いします。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します