CSS实现书籍3D翻页效果

编程语言 2018-05-09 14:17:37 阅读次数: 2

CSS实现书籍3D翻页效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        html, body {
            height: 100%;
            overflow: hidden;
        }

        body {
            background: -webkit-radial-gradient(#E4CEA6, #9C8763);
            background: radial-gradient(#E4CEA6, #9C8763);
            -webkit-perspective: 900px;
            perspective: 900px;
            margin: 0;
        }

        #flip {
            -webkit-animation: wrapper 6s ease-in-out infinite;
            animation: wrapper 6s ease-in-out infinite;
            height: 350px;
            width: 253px;
            position: absolute;
            left: 50%;
            top: 30%;
            -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) !important;
            transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) !important;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform-origin: 0 0 0;
            transform-origin: 0 0 0;
        }

        @-webkit-keyframes wrapper {
            50% {
                -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
                transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
            }
        }

        @keyframes wrapper {
            50% {
                -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
                transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
            }
        }

        #flip div {
            height: 350px;
            width: 24px;
            position: absolute;
            left: calc(100% - 1px);
            -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            background-size: 253px 350px;
        }

        #flip #front,
        #flip #front div {
            background-image: url(http://img.hoop8.com/attachments/1512/846611208706.png);
            box-shadow: inset rgba(255, 255, 255, 0.3) 0px -1px 0 0, #35582C 0px 1px 0px 0px;
        }

        #flip #front > div > div > div > div > div > div > div > div > div > div {
            box-shadow: inset rgba(255, 255, 255, 0.3) -1px -1px 0 0, #35582C 1px 1px 0px 0px;
        }

        #flip #back {
            -webkit-transform: rotateY(.2deg);
            transform: rotateY(.2deg);
        }

        /* avoid pages overlap */
        #flip #back,
        #flip #back div {
            background-image: url(http://img.hoop8.com/attachments/1512/846611208706.png);
        }

        #flip > div {
            left: 0;
            background-position-x: 0;
        }

        #flip div > div {
            background-position-x: -23px;
            -webkit-animation: page 6s ease-in-out infinite;
            animation: page 6s ease-in-out infinite;
        }

        #flip div > div > div {
            background-position-x: -46px;
        }

        #flip div > div > div > div {
            background-position-x: -69px;
        }

        #flip div > div > div > div > div {
            background-position-x: -92px;
        }

        #flip div > div > div > div > div > div {
            background-position-x: -115px;
        }

        #flip div > div > div > div > div > div > div {
            background-position-x: -138px;
        }

        #flip div > div > div > div > div > div > div > div {
            background-position-x: -161px;
        }

        #flip div > div > div > div > div > div > div > div > div {
            background-position-x: -184px;
        }

        #flip div > div > div > div > div > div > div > div > div > div {
            background-position-x: -207px;
        }

        #flip div > div > div > div > div > div > div > div > div > div > div {
            background-position-x: -229px;
        }

        /* the more pieces you have, the smoother the bend is */

        @-webkit-keyframes page {
            15% {
                -webkit-transform: rotateY(-10deg);
                transform: rotateY(-10deg);
            }
            50% {
                -webkit-transform: rotateY(-2deg);
                transform: rotateY(-2deg);
            }
            65% {
                -webkit-transform: rotateY(10deg);
                transform: rotateY(10deg);
            }
            100% {
                -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
            }
        }

        @keyframes page {
            15% {
                -webkit-transform: rotateY(-10deg);
                transform: rotateY(-10deg);
            }
            50% {
                -webkit-transform: rotateY(-2deg);
                transform: rotateY(-2deg);
            }
            65% {
                -webkit-transform: rotateY(10deg);
                transform: rotateY(10deg);
            }
            100% {
                -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
            }
        }

        #book {
            width: 248px;
            height: 350px;
            position: absolute;
            left: 50%;
            top: 30%;
            -webkit-transform: translate3d(0px, 0px, -10px) rotateX(60deg) rotateZ(29deg);
            transform: translate3d(0px, 0px, -10px) rotateX(60deg) rotateZ(29deg);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform-origin: 0 0 0;
        }

        @-webkit-keyframes book {
            25% {
                box-shadow: inset rgba(0, 0, 0, .2) 0px 0 50px -140px;
            }
            50% {
                box-shadow: inset rgba(0, 0, 0, .2) 0px 0 50px -140px;
            }
            100% {
                box-shadow: inset rgba(0, 0, 0, .2) 510px 0 50px -140px;
            }
        }

        @keyframes book {
            25% {
                box-shadow: inset rgba(0, 0, 0, .2) 0px 0 50px -140px;
            }
            50% {
                box-shadow: inset rgba(0, 0, 0, .2) 0px 0 50px -140px;
            }
            100% {
                box-shadow: inset rgba(0, 0, 0, .2) 510px 0 50px -140px;
            }
        }

        #book #top {
            -webkit-animation: book 6s ease-in-out infinite;
            animation: book 6s ease-in-out infinite;
            background: url(http://img.hoop8.com/attachments/1512/900611208706.png);
            background-size: 100% 100%;
            background-position: 100%;
            box-shadow: inset rgba(0, 0, 0, 0.2) 510px 0 50px -140px;
            height: 350px;
            width: 248px;
            position: absolute;
            left: 0;
            top: 0;
        }

        #book #bottom {
            background: #E7DED1;
            box-shadow: rgba(83, 53, 13, 0.2) 4px 2px 1px,
            #35582C 1px 1px 0px 0px;
            height: 350px;
            width: 253px;
            position: absolute;
            -webkit-transform: translateZ(-40px);
            transform: translateZ(-40px);
            left: 0;
            top: 0;
        }

        #book #shadow {
            -webkit-animation: shadow 6s ease-in-out infinite;
            animation: shadow 6s ease-in-out infinite;
            box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
            height: 350px;
            width: 248px;
            position: absolute;
            left: -100%;
            top: 0;
            -webkit-transform: translateZ(-40px);
            transform: translateZ(-40px);
        }

        @-webkit-keyframes shadow {
            20% {
                box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
            }
            50% {
                box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;
            }
            60% {
                box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
            }
        }

        @keyframes shadow {
            20% {
                box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
            }
            50% {
                box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;
            }
            60% {
                box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
            }
        }

        #book #front {
            background: -webkit-linear-gradient(top, #FCF6EA, #D8D1C3);
            background-size: 100% 2px;
            box-shadow: inset #C2BBA2 3px 0 0px, #35582C -2px 1px 0px 0px;
            height: 40px;
            width: 251px;
            left: -3px;
            position: absolute;
            bottom: -40px;
            -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
            -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        #book #right {
            background: -webkit-linear-gradient(left, #DDD2BB, #BDB3A0);
            background-size: 2px 100%;
            box-shadow: inset rgba(0, 0, 0, 0) 0 0 0 20px;
            height: 100%;
            width: 40px;
            position: absolute;
            right: -40px;
            top: 0;
            -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
            -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
        }

        h4 {
            position: absolute;
            bottom: 20px;
            left: 20px;
            margin: 0;
            font-weight: 200;
            opacity: 1;
            font-family: sans-serif;
            color: rgba(0, 0, 0, 0.3);
        }

        /* bookmark */

        #bookmark {
            position: absolute;
            -webkit-transform: translate3d(20px, 350px, -16px);
            transform: translate3d(20px, 350px, -16px);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        #bookmark div {
            background: rgb(151, 88, 88);
            box-shadow: rgb(133, 77, 77) 1px 0;
            height: 10px;
            width: 20px;
            position: absolute;
            top: 9px;
            -webkit-transform: rotateX(-14deg);
            transform: rotateX(-14deg);
            -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        #bookmark > div > div {
            background: -webkit-linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
            background: linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
        }

        #bookmark > div > div > div {
            background: -webkit-linear-gradient(top, rgb(151, 88, 88), rgb(133, 77, 77));
            background: linear-gradient(top, rgb(151, 88, 88), rgb(133, 77, 77));
        }

        #bookmark > div > div > div > div {
            background: none;
            border-top: 0px solid transparent;
            border-right: 10px solid rgb(133, 77, 77);
            border-bottom: 10px solid transparent;
            border-left: 10px solid rgb(133, 77, 77);
            height: 0;
            width: 0;
        }

        #bookmark-shadow {
            background: -webkit-linear-gradient(top, rgba(83, 53, 13, 0.25), rgba(83, 53, 13, 0.11));
            background: linear-gradient(top, rgba(83, 53, 13, 0.25), rgba(83, 53, 13, 0.11));
            height: 15px;
            width: 20px;
            position: absolute;
            -webkit-transform: translate3d(12px, 350px, -25px) rotateX(-90deg) skewX(20deg);
            transform: translate3d(12px, 350px, -25px) rotateX(-90deg) skewX(20deg);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }
    </style>
</head>
<body>
<!-- Please heart it if you like! -->
<div id='book'>
    <div id='top'></div>
    <div id='front'></div>
    <div id='right'></div>
    <div id='bottom'></div>
    <div id='shadow'></div>
    <div id='bookmark'>
        <div>
            <div>
                <div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
    <div id='bookmark-shadow'></div>
</div>
<div id='flip'>
    <div id='front'>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id='back'>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<h4>CSS实现3D翻书效果</h4>
</body>
</html>

 

.

猜你喜欢

转载自570109268.iteye.com/blog/2410705
今日推荐
面壁智能发布 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