HTML/CSS 订阅所有【HTML/CSS】的日志

基于CSS3属性Animation和transform实现类似翻书效果[转]

编辑:dnawo 日期:2022-07-18

字体大小: 小 中 大


复制内容到剪贴板程序代码 程序代码
<!doctype html>
<head>
    <meta charset="utf-8">
    <title>基于CSS3属性Animation及transform实现类似翻书效果</title>
    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        .book{
            width: 460px;
            height: 300px;
            position: relative;
            margin: 150px 400px;
            transform: rotatex(15deg);
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
        }
        .page{
            width: 230px;
            height: 300px;
            border: 1px solid #666;
            position: absolute;
            right: 0;
            transform-origin: left;
            transform-style: preserve-3d;
            backface-visibility:hidden;
            font-size: 60px;
            text-align: center;
            line-height: 300px;
        }
        .page span{
            display: block;
            width: 100%;
            position: absolute;
            background-color: #00FFFF;
        }
        .page span:nth-child(2){
            transform: rotatey(-180deg);
            backface-visibility:hidden;
        }

        /*翻上一页动画*/
        @keyframes prev {
            0%{
                transform: rotatey(-180deg);
                z-index: 10;
            }
            100%{
                transform: rotatey(0deg);
            }
        }
        /*翻下一页动画*/
        @keyframes next {
            0%{
                transform: rotatey(0deg);
            }
            100%{
                transform: rotatey(-180deg);
                z-index: 10;
            }
        }
    </style>
</head>
<body>
    <!-- 所展示的书的内容 -->
    <div class="book">
        <div class="page">
            <span>1</span>
            <span>2</span>
        </div>
        <div class="page">
            <span>3</span>
            <span>4</span>
        </div>
        <div class="page">
            <span>5</span>
            <span>6</span>
        </div>
        <div class="page">
            <span>7</span>
            <span>8</span>
        </div>
        <div class="page">
            <span>9</span>
            <span>10</span>
        </div>
    </div>
    <!-- 用来控制上一页和下一页操作 -->
    <input type="button" value="上一页" id="prev"/>
    <input type="button" value="下一页" id="next"/>

    <script>
        $(document).ready(function(){
            let pageno = 0;
            let pagecount = $(".page").length;

            //设置每一页z-index
            let i=0;
            $(".page").each(function(){
                i++;
                $(this).css("z-index", pagecount-i);
            })

            //翻上一页
            $("#prev").click(function(){
                if(pageno > 0){
                    pageno--;
                    $(".page:eq("+pageno+")").css("animation", "prev 1.5s linear 1 forwards");
                }else{
                     pageno = 0;
                }
            })

            //翻下一页
            $("#next").click(function(){
                if(pageno < pagecount){                    
                    $(".page:eq("+pageno+")").css("animation", "next 1.5s linear 1 forwards");
                    pageno++;
                }else{
                     pageno = pagecount;
                }
            })
        });
    </script>
</body>
</html>

原文链接：https://www.cnblogs.com/LUOQIANangel/p/5598512.html

上一篇: CSS3实现翻书效果步骤详解
下一篇: DIV使用opacity设置透明后子元素不能取消透明解决方法
文章来自: 笛声如诉人影茫
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 1611
发表评论
请登录后再发表评论！