纯js+c3动画实现3D动画翻转（翻书效果）

最新推荐文章于 2024-06-14 08:57:40 发布

Mr.王征

最新推荐文章于 2024-06-14 08:57:40 发布

阅读量3.7k

点赞数 5

分类专栏： HTML5 CSS 文章标签： css

本文链接：https://blog.csdn.net/wangzhneg123/article/details/87367917

版权

CSS 同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

HTML5

23 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>3D动画翻转</title>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        .book {
            width:460px;
            height:300px;
            position:relative;
            margin:10px 300px;
            -webkit-transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
            -ms-transform-style:preserve-3d;
            transform-style:preserve-3d;
            transform:rotatex(30deg);
        }
        .page {
            width:230px;
            height:300px;
            border:1px solid #666;
            position:absolute;
            transform-origin:left;
            transform-style:preserve-3d;
            backface-visibility:hidden;
            font-size:60px;
            text-align:center;
        }
        .page span {
            display:block;
            height:100%;
            width:100%;
            position:absolute;
            /*background-image:url(../img/img_1001.jpg);
            background-size:100% 100%;
            */
        }
        .page span:nth-child(2) {
            transform:rotatey(-180deg);
            backface-visibility:hidden;
        }
        .bookImage {
            width:230px;
            height:300px;
        }
        .serialNum {
            width:40px;
            height:40px;
            font-size:36px;
            border:1px solid #6d9c36;
            color:#7b7115;
            opacity:0.8;
            position:absolute;
            top:5px;
            right:5px;
            background-color:#fff0f0;
        }
        #but {
            width:300px;
            height:50px;
            margin:10px;
        }
        #after {
            width:60px;
            height:30px;
            float:right;
            margin-right:10px;
        }
        #before {
            width:60px;
            height:30px;
            float:left;
            margin-left:10px;
        }
        /*以下两个动画可以只使用第一个，animation中有reverse，可以反向执行动画，
                    使用时需要在JS中点击上一页时添加改属性值*/


        /*翻书下一页的动画*/

        @keyframes page {
            0% {
                transform:rotateY(0deg);
            }
            100% {
                transform:rotateY(-180deg);
                z-index:10;
            }
        }/*翻书上一页的动画*/

        @keyframes page1 {
            0% {
                transform:rotateY(-180deg);
                z-index:10;
            }
            100% {
                transform:rotateY(0deg);
            }
        }</style>
</head>


<body>

<div class="book">
    <div class="page">
        <span><div class="serialNum">1</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160849926.jpg"></span>
        <span><div class="serialNum">2</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160231221.jpg"></span>
    </div>
    <div class="page">
        <span><div class="serialNum">3</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160849926.jpg"></span>
        <span><div class="serialNum">4</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160231221.jpg"></span>
    </div>

    <div class="page">
        <span><div class="serialNum">5</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160849926.jpg"></span>
        <span><div class="serialNum">6</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160231221.jpg"></span>
    </div>
    <div class="page">
        <span><div class="serialNum">7</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160849926.jpg"></span>
        <span><div class="serialNum">8</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160231221.jpg"></span>
    </div>

    <div class="page">
        <span><div class="serialNum">9</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160849926.jpg"></span>
        <span><div class="serialNum">10</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160231221.jpg"></span>
    </div>
    <div class="page">
        <span><div class="serialNum">11</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160849926.jpg"></span>
        <span><div class="serialNum">12</div><img class="bookImage" src="https://img-blog.csdnimg.cn/20190215160231221.jpg"></span>
    </div>
</div>


<div id="but">
    <input type="button" value="上一页" id="before">
    <input type="button" value="下一页" id="after">
</div>

<script>
    var before = document.querySelector("#before");
    var after = document.querySelector("#after");
    //var book = document.querySelector(".book");
    var page = document.getElementsByClassName("page");
    var pageNum = document.getElementsByClassName("page").length;

    window.onload = function() {
        var middle = 0;

        for (var z = 0; z < pageNum; z++) {
            page[z].style.zIndex = pageNum - z;
        }
        after.onclick = function() {
            if (middle < pageNum) {
                page[middle].style.animation = "page 1.5s linear 1 forwards";
                middle++;
            }
            //    else {
            //       middle = pageNum;
            //    }
        };
        before.onclick = function() {
            if (middle > 0) {
                page[middle - 1].style.animation = "page1 1.5s linear 1 forwards";
                middle--;
            }
            //    else {
            //       middle = 0;
            //    }
        }
    }
</script>

</body>
</html>

Mr.王征

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
纯js+c3动画实现3D动画翻转（翻书效果）

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;3D动画翻转&lt;/title&gt; &lt;script src="http://libs.baidu.com/jquery/1.11.3/jquery.m
复制链接

扫一扫