纯CSS实现的3D翻页效果

其他 2019-01-18 00:50:51 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/CNZSWYMP/article/details/75214059

CSS实现的3D翻页效果  我是三页翻页。

CSS代码如下：

* {
    padding: 0;
    margin: 0;
}
body, html {
    height: 100%;
}
body {

    /*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，
    大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。*/
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
    background-color: #212121;
    font-family: '微软雅黑';
}
.book {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    width: 400px;
    height: 550px;
    background-color: #fff;
    -webkit-transform: rotateX(30deg);
    -ms-transform: rotateX(30deg);
    -o-transform: rotateX(30deg);
    transform: rotateX(30deg);
}
.preserve-3d {

    /*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内,
    还是在该元素所在的平面内被扁平化。*/
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    /*规定如何在 3D 空间中呈现被嵌套的元素*/
    transform-style: preserve-3d;
}
.book-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 550px;
    /*设置四个边框的样式*/
    border: 1px solid papayawhip;
    text-align: center;
}
.book-page-box {
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    /*设置旋转元素的基点位置*/
    transform-origin: 0 50%;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    /*旋转DIV元素*/
    transform: rotateY(0deg);
}
@keyframes flipBook1 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(-160deg);
        -ms-transform: rotateY(-160deg);
        -o-transform: rotateY(-160deg);
        transform: rotateY(-160deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

/* Firefox */
@-moz-keyframes flipBook1 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(-160deg);
        -ms-transform: rotateY(-160deg);
        -o-transform: rotateY(-160deg);
        transform: rotateY(-160deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

/* Safari and Chrome */
@-webkit-keyframes flipBook1 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(-160deg);
        -ms-transform: rotateY(-160deg);
        -o-transform: rotateY(-160deg);
        transform: rotateY(-160deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

/* Opera */
@-o-keyframes flipBook1 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(-160deg);
        -ms-transform: rotateY(-160deg);
        -o-transform: rotateY(-160deg);
        transform: rotateY(-160deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}
@keyframes flipBook2 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(-150deg);
        -ms-transform: rotateY(-150deg);
        -o-transform: rotateY(-150deg);
        transform: rotateY(-150deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

/* Firefox */
@-moz-keyframes flipBook2 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(-150deg);
        -ms-transform: rotateY(-150deg);
        -o-transform: rotateY(-150deg);
        transform: rotateY(-150deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

/* Safari and Chrome */
@-webkit-keyframes flipBook2 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(-150deg);
        -ms-transform: rotateY(-150deg);
        -o-transform: rotateY(-150deg);
        transform: rotateY(-150deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

/* Opera */
@-o-keyframes flipBook2 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(-150deg);
        -ms-transform: rotateY(-150deg);
        -o-transform: rotateY(-150deg);
        transform: rotateY(-150deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}
@keyframes flipBook3 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(-140deg);
        -ms-transform: rotateY(-140deg);
        -o-transform: rotateY(-140deg);
        transform: rotateY(-140deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

/* Firefox */
@-moz-keyframes flipBook3 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(-140deg);
        -ms-transform: rotateY(-140deg);
        -o-transform: rotateY(-140deg);
        transform: rotateY(-140deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

/* Safari and Chrome */
@-webkit-keyframes flipBook3 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(-140deg);
        -ms-transform: rotateY(-140deg);
        -o-transform: rotateY(-140deg);
        transform: rotateY(-140deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

/* Opera */
@-o-keyframes flipBook3 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(-140deg);
        -ms-transform: rotateY(-140deg);
        -o-transform: rotateY(-140deg);
        transform: rotateY(-140deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

/*书的封面*/
.book-page-1 .page-front {
    background-color: cornflowerblue;
}
.book-page-1 .page-back {
    background-color: #fff;
}
.book-page-1 .page-front p {
    font-size: 40px;
    color: #fff;
    margin-top: 100px;
   font-family: 华文琥珀;
    vertical-align:middle;
    text-align: center;
}
.flip-animation-1 {
    /*把 "flipBook" 动画捆绑到 div 元素，时长：17 秒*/
    animation: flipBook1 17s;
    -moz-animation: flipBook1 17s; /* Firefox */
    -webkit-animation: flipBook1 17s; /* Safari and Chrome */
    -o-animation: flipBook1 17s; /* Opera */
}

/*书的第二页*/
.book-page-2 .page-back, .book-page-2 .page-front {
    background-color: #fff;
}
.book-page-2 .page-front p {
    font-size: 25px;
    color: #1976D2;
    font-family: 华文楷体;
    margin-top: 100px;
    writing-mode:tb-rl;
}
.flip-animation-2 {
    /*把 "flipBook2" 动画捆绑到 div 元素，时长：13 秒,延长2秒*/
    animation: flipBook2 13s 2s;
    -moz-animation: flipBook2 13s 2s; /* Firefox */
    -webkit-animation: flipBook2 13s 2s; /* Safari and Chrome */
    -o-animation: flipBook2 13s 2s; /* Opera */
}

/*书的第三页*/
.book-page-3 .page-back, .book-page-3 .page-front {
    background-color: #fff;
}
.book-page-3 .page-front p {
    font-size: 30px;
    color: #1976D2;
    margin-top: 100px;
    font-family: 华文楷体;
}
.flip-animation-3 {
    animation: flipBook3 10s 3s;
    -moz-animation: flipBook3 10s 3s; /* Firefox */
    -webkit-animation: flipBook3 10s 3s; /* Safari and Chrome */
    -o-animation: flipBook3 10s 3s; /* Opera */
}

/*书的第四页*/
.book-page-4 .page-front p {
    font-size: 30px;
    color: #1976D2;
    margin-top: 50px;
    writing-mode:tb-rl;
    font-family: 华文楷体;
}

html代码

 <!-- 代码部分begin -->
    <!-- 书的主体 -->
    <div class="book preserve-3d">
        <!-- 书的最后一页 -->
        <div class="book-page-box book-page-4 preserve-3d">
            <div class="book-page page-front">
                <p>平生不会相思，才会相思，便害相思，身似浮云，心如飞絮，气若游丝；空一缕余香再此
                盼千金游子何之，症候来时，正是何时，灯半昏时，月半明时。
                <br/>
                <br/>
                <br/>
                </p>
            </div>
        </div>
        <!-- 书的第三页 -->
        <div class="book-page-box book-page-3 preserve-3d flip-animation-3">
            <div class="book-page page-front">
                <p><br/>文字部分<br/>
                    文字部分<br/>
                    <br/>
                   文字部分。
                    <br/>
                    世不相忘。<br/>
                    <br/>
                    文字部分
                    <br/>
                   文字部分
                </p>
            </div>
        </div>
        <!-- 书的第二页 -->
        <div class="book-page-box book-page-2 preserve-3d flip-animation-2">
            <div class="book-page page-front">
                <p>文字部分</p>
            </div>
        </div>
        <!-- 书的封面 -->
        <div class="book-page-box book-page-1 preserve-3d flip-animation-1">
            <div class="book-page page-front">
                <p>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                   文字部分
                    <br>
                    文字部分
                </p>
            </div>
        </div>
    </div>

注释里面都有解释。

猜你喜欢

转载自blog.csdn.net/CNZSWYMP/article/details/75214059
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022