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

作者: dnawo

日期: 2022-07-18 09:36 AM

分类: HTML/CSS

内容:
复制内容到剪贴板程序代码<!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

+ 查看当前日志评论 (0)

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.049 ms

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

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.049 ms

暂无评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.049 ms