css实现翻书效果

richest_qi

已于 2022-08-11 09:04:49 修改

阅读量1.6k

点赞数

分类专栏： css 文章标签：过渡 transition

于 2022-08-10 17:15:46 首次发布

本文链接：https://blog.csdn.net/qzw752890913/article/details/126270515

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

【需求描述】css实现翻书效果。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css实现翻书效果</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: skyblue;
    }
    .book{
        width: 200px;
        height: 300px;
        position: relative;
        margin: 100px auto;

        /* 设置元素的子元素是位于3D空间还是平面中 */
        transform-style: preserve-3d;
        /* 景深效果：由远及近，从大到小 */
        perspective: 800px;
    }
    #page1,#page2,#page3,#page4{
        transform-origin: left;
        transform-style:preserve-3d;

        position: absolute;
        left: 0;
        top: 0;
        
    }
    #page1{
        z-index: 4;
    }
    #page2{
        z-index: 3;
    }
    #page3{
        z-index: 2;
    }
    #page4{
        z-index: 1;
    }

    .page-front{
        width: 200px;
        height: 300px;
        background: #fff;

        /* 元素背向观察者时，不可见 */
        backface-visibility: hidden;
    }
    .page-back{
        width: 200px;
        height: 300px;
        background: #ccc;
        transform: rotateY(180deg);
    }
    .page-front,.page-back{
        position: absolute;
        left: 0;
        top: 0;

        display: flex;
        justify-content: center;
        align-items: end;
    }
    </style>

</head>
<body>
    <div class="book">
        <div id="page1">
            <div class="page-back">2</div>
            <div class="page-front">1</div>
        </div>
        <div id="page2">
            <div class="page-back">4</div>
            <div class="page-front">3</div>
        </div>
        <div id="page3">
            <div class="page-back">6</div>
            <div class="page-front">5</div>
        </div>
        <div id="page4">
            <div class="page-back">8</div>
            <div class="page-front">7</div>
        </div>
    </div>


    <script>
        var bookDom = document.querySelector(".book");
        var pageDoms = document.querySelectorAll("[id^='page']");

        var currentIndex = 0;

        bookDom.onclick = function(){
            if(currentIndex >=  pageDoms.length){
                currentIndex = 0;
                reset();
                return;
            }
            pageDoms[currentIndex].style.transition = "2s";
            pageDoms[currentIndex].style.transform = "rotateY(-135deg)";
            pageDoms[currentIndex].style.zIndex = ++currentIndex;
        }
        
        function reset(){
            resetZindex();
            resetRotate();
        }
        function resetZindex(){
            pageDoms.forEach(function(pageDom,index){
                pageDom.style.zIndex = pageDoms.length - index;
            });           
        }
        function resetRotate(){
            pageDoms.forEach(function(pageDom,index){
                pageDom.style.transform = "rotateY(0)";
            })
        }
    </script>
</body>
</html>