css3翻书效果-CSS3实现书籍的3D翻页效果代码及按键解读

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

使用css3 3d动画可以实现很多实用的眼花缭乱的特效。 本文将与大家分享一款模拟书籍翻页的动画特效，可以为用户提供良好的视觉和交互体验。 对于您学习和掌握CSS 3d动画也有一定的参考价值。 。 下面是css3书籍翻页效果的具体代码，有兴趣的同事可以一起学习一下。

要点：

1.css3 3d动画的掌握

2.如何解决翻转后页面内容变化的问题

3. 如何让书本保持在中央

代码概述

    
    
    


    .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)
    }


    

        

            
封面
            
1
        
        

            
2
            
3
        
        

            
4
            
5
        
        

            
6
            
尾面
        
    


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

分析

CSS3动画属性解释：

视角：5000px； 这里就是透视属性，可以简单的认为是实现“近大远小”效果的属性。 这里需要注意的是，透视需要设置在进行3D变换的元素的父元素上，因为只有进行3D变换的元素才能以父元素为背景进行透视变换才能看到效果。

transition:all 1s ease：这里是过渡属性，可以设置过渡时间和应用的缓动功能。

transform-origin: left center：该属性可以设置transformation属性的起点css3翻书效果css3翻书效果，表示以左中心为点绕y轴旋转。

变换风格：保留 3d；； 此属性允许设置此属性的元素的子元素也基于父元素呈现相同的视角，前提是子元素也经过 3D 变换。

解决页面内容显示问题：

背面可见性：隐藏； 让旋转180度的元素隐藏，即反面不可见。使用该属性可以使页面1旋转180度然后隐藏，而显示页面2从-180度旋转到0度，从而实现书籍内容切换

解决书籍页面居中问题：

trans:translate(0,0) 通过使用翻译属性解决这个问题，剩下的就是用js添加点击波浪和控制元素样式来实现翻页动画。