原生JS实现翻页效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS3翻书效果</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            body,html {
                height: 100%;
            }
            li{
                list-style: none;
            }
            body {
                -webkit-perspective: 2000px;
                -moz-perspective: 2000px;
                -ms-perspective: 2000px;
                perspective: 2000px;/*3D视角距离*/
                background-color: #212121;
            }
            .book {
                position: absolute;
                top: 30%;
                left: 40%;
                width: 500px;
                height: 500px;
                background-color: #fff;
                -webkit-transform: rotateX(30deg);
                -ms-transform: rotateX(30deg);
                -o-transform: rotateX(30deg);
                transform: rotateX(30deg);
            }
            /*开3D效果*/
            .pre-3d {                
                -webkit-transform-style: preserve-3d;
                -moz-transform-style: preserve-3d;
                -ms-transform-style: preserve-3d;
                transform-style: preserve-3d;   /*transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素:子元素将保留其 3D 位置*/
            }
            .page {
                position: absolute;
                top: 0;
                left: 0;
                width: 500px;
                height: 500px;
                border: 1px solid #1976D2;
                /*text-align: center;*/
                -webkit-transform-origin: 0 50%;
                -moz-transform-origin: 0 50%;
                -ms-transform-origin: 0 50%;
                -o-transform-origin: 0 50%;
                transform-origin: 0 50%;
            }
            img{
                width: 100%;
                height: 100%;
            }  
            #Rcover{
                width: 500px;height: 500px;
            }
        </style>
    </head>
    <body>
        <div class="book pre-3d" id="book">
            <ul>
            <!-- 后封面 -->
            <li class="" id="Rcover">![](img/6.jpg)</li>
            <!-- 书页 -->
            <li class="pre-3d  page">![](img/5.jpg)</li>
            <li class="pre-3d  page">![](img/4.jpg)</li>
            <li class="pre-3d  page">![](img/3.jpg)</li>
            <li class="pre-3d  page">![](img/2.jpg)</li>
            <!-- 书的封面 -->
            <li class="pre-3d  page">![](img/1.jpg)</li>
            </ul>
        </div>
    </body>
<script>
    var b=document.getElementById('book');
    var s=document.getElementsByTagName('li');
    var c=document.getElementById('Rcover');
    var i=5;
    b.onclick=function(){
        if(i>0){
            s[i].style.transform='rotateY(-140deg)';
            s[i].style.transition='3s';//动画需要的时间3s
            console.log(i);            
            i--;
        }
    }
    c.onclick=function(){
        for(var j=1;j<6;j++){
            s[j].style.transform='rotateY(0deg)';
            s[j].style.transition='3s';
        }
    }
</script>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容