书本翻页效果

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:white;

        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)

    }

body代码

<div class="book">

        <div class="page active">

            <div class="front"><img src="img/b.jpg" width=100% height=96%></div>

            <div class="back"><img src="img/m4.jpg" width=100% height=96%>1</div>

        </div>

        <div class="page">

            <div class="front"><img src="img/m1.jpg" width=100% height=96%>2</div>

            <div class="back"><img src="img/m2.jpg" width=100% height=96%>3</div>

        </div>

        <div class="page">

            <div class="front"><img src="img/m3.jpg" width=100% height=96%>4</div>

            <div class="back"><img src="img/5.jpg" width=100% height=96%>5</div>

        </div>

        <div class="page">

            <div class="front"><img src="img/6.jpg" width=100% height=96%>6</div>

            <div class="back"><img src="img/7.jpg" width=100% height=98%></div>

        </div>

    </div>

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')

                }

            }

        })

    }