标题: CSS3实现翻书效果步骤详解

作者: dnawo

日期: 2022-07-17 11:03 PM

分类: 其他

内容:
首先，定义翻开时书本的大小(200px X 200px)和纸张的大小(100px X 200px)：
复制内容到剪贴板程序代码<style>
    #book{
        width: 200px;
        height: 200px;
        position: absolute;
    }
    #page{
        width: 100px;
        height: 200px;
        left: 100px;
        position: absolute;
    }
    #page img{
        border: 1px solid #000;
    }
</style>
<div id="book">
    <div id="page">
        <img src="images/01.jpg" />
    </div>
</div>
接着，添加翻页效果：
复制内容到剪贴板程序代码<style>
    @keyframes next {
        0% {transform: rotatey(0deg);}
        100% {transform: rotatey(-180deg);}
    }
    #page {
        transform-origin: left;
        animation: next 3s linear forwards;
    }
</style>
有点瑕疵，透视了，设置隐藏背面内容：
复制内容到剪贴板程序代码<style>
    #page {
        backface-visibility:hidden;
    }
</style>
怎么空白了？正常的，因为背面没有内容，在背面添加第2页：
复制内容到剪贴板程序代码<style>
    #page {
        transform-style: preserve-3d;
    }
    #page img{
        position: absolute;
    }
    #page img:nth-child(2){
        /* 翻转第2页 */
        transform: rotatey(-180deg);
        /* 需单独设置背面隐藏，page设置的这边无效 */
        /* 或者给img添加z-index进行覆盖 */
        backface-visibility:hidden;
    }
</style>
<div id="book">
    <div id="page">
        <img src="images/01.jpg" />
        <img src="images/02.jpg" />
    </div>
</div>
继续添加其他页面，完整代码如下：
复制内容到剪贴板程序代码<!doctype html>
<head>
    <meta charset="utf-8">
    <title>CSS3实现翻书效果步骤详解</title>
    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
    #book{
        width: 200px;
        height: 200px;
        position: relative;
        transform: rotatex(15deg);
        transform-style: preserve-3d;
    }
    .page{
        width: 100px;
        height: 200px;
        left: 100px;
        position: absolute;

        transform-origin: left;
        backface-visibility:hidden;
        transform-style: preserve-3d;
    }
    .page img{
        border: 1px solid #000;
        position: absolute;
    }
    .page img:nth-child(2){
        transform: rotatey(-180deg);
        backface-visibility:hidden;
    }
    /* 上一页关键帧 */
    @keyframes prev {
        0% {
            transform: rotatey(-180deg);
        }
        100% {
            transform: rotatey(0deg);
        }
    }
    /* 下一页关键帧 */
    @keyframes next {
        0% {
            transform: rotatey(0deg);
        }
        100% {
            transform: rotatey(-180deg);
            z-index: 999;
        }
    }
</style>
</head>
<body>
<div id="book">
    <div class="page">
        <img src="images/01.jpg" />
        <img src="images/02.jpg" />
    </div>
    <div class="page">
        <img src="images/03.jpg" />
        <img src="images/04.jpg" />
    </div>
    <div class="page">
        <img src="images/05.jpg" />
        <img src="images/end.jpg" />
    </div>
</div>
<br/><br/><br/>
<button id="btnPrev">上一页</button>
<button id="btnNext">下一页</button>
<script>
    $(document).ready(function(){
        let pageno = 0;
        let pagecount = $(".page").length;
        //设置z-index
        for(let i=0;i<pagecount;i++){
            $(`.page:eq(${i})`).css("z-index",pagecount-i);
        }
        //上一页
        $("#btnPrev").click(function(){
            if(pageno > 0){
                $(`.page:eq(${--pageno})`).css("animation","prev 3s linear forwards");
            }
        })
        //下一页
        $("#btnNext").click(function(){
            if(pageno < pagecount){
                $(`.page:eq(${pageno++})`).css("animation","next 3s linear forwards");
            }
        })
    })
</script>
</body>
</html>
DEMO下载：https://www.mzwu.com/pic/202207/css3_animation_transform.rar

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

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.048 ms

标题: CSS3实现翻书效果步骤详解

你没有权限发表评论

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.048 ms

暂无评论

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.048 ms