其他 订阅所有【其他】的日志

CSS3实现翻书效果步骤详解

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

字体大小: 小 中 大


首先，定义翻开时书本的大小(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

上一篇: CSS3动画学习笔记
下一篇: 基于CSS3属性Animation和transform实现类似翻书效果[转]
文章来自: 笛声如诉人影茫
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 1988
发表评论
请登录后再发表评论！