纯css实现3d翻书效果-html代码-BFW代码库

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 3D Bending Effect - Page Flip</title>
    <style>
        /* remember to use - transform-style: preserve-3d; */
        html,body {
            height: 100%;
            overflow: hidden;
        }
        body {
            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) rotateY(0deg)!important;
            transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!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://blogs.slj.com/afuse8production/files/2012/06/Hobbit1.jpg);
            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(.4deg);
            transform: rotateY(.4deg);
            -webkit-transform-origin: -100% 0;
            transform-origin: -100% 0;
        }

        /* avoid pages overlap */
        #flip #back,
        #flip #back div {
            background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map1_.jpg);
        }

        #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(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map2.jpg);
            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,
          .........完整代码请登录后点击上方下载按钮下载查看