3D animation 书

// CCS

   <style>
        body {perspective: 1000px;}          //  透视
        .images{
            width: 1000px;
            height: 600px;
            margin: 0 auto;
            transform: rotateX(30deg);
            transform-style: preserve-3d;     // 3d效果
            position: relative;
            top: 200px;
        }
        .pageBox{
            width: 1000px;
            height: 600px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .page{
            width: 500px;
            height: 600px;
            position: absolute;
            top: 0;
            left: 50%;
            background-color: #fff;
            border: 1px solid #96a36e;
            border-left: 3px solid #84bbd7;
            text-align: center;
            box-shadow: 50px 50px 200px 1px #8dc2f4 inset
        }
        .page7{left: -3px;top: -1px;}
        .pageBox1{animation: amt1 20s;z-index: 10;top: -5px;}
        .pageBox2{animation: amt2 16s 2s;z-index: 9;top: -4px;}
        .pageBox3{animation: amt3 13s 3s;z-index: 8;top: -3px;}
        .pageBox4{animation: amt4 10s 4s;z-index: 7;top: -2px;}
        .pageBox5{animation: amt5 7s 5s;z-index: 6;top: -1px;}
        .pageBox6{z-index: 0}

        .page1{background: url("images/01.jpg") no-repeat 50% 50%;background-size: 100% 100%;}
        .page2{background: url("images/02.png") no-repeat 50% 50%;background-size: 95% 95%;}
        .page3{background: url("images/03.jpeg") no-repeat 50% 50%;background-size: 95% 95%;}
        .page4{background: url("images/04.jpg") no-repeat 50% 50%;background-size: 90% 90%;}
        .page5{background: url("images/05.jpg") no-repeat 50% 50%;background-size: 90% 90%;}
        .page6{box-shadow: 50px 50px 200px 1px #666;}
        .page7{background:#8dc2f4 url("images/06.jpg") no-repeat 50% 50%;background-size: 100% 100%;}

        @keyframes amt1 {
            0% {transform: rotateY(0deg)}
            50% {transform: rotateY(-180deg)}
            100% {transform: rotateY(0deg)}
        }
        @keyframes amt2 {
            0% {transform: rotateY(0deg)}
            50% {transform: rotateY(-170deg)}
            100% {transform: rotateY(0deg)}
        }
        @keyframes amt3 {
            0% {transform: rotateY(0deg)}
            50% {transform: rotateY(-160deg)}
            100% {transform: rotateY(0deg)}
        }
        @keyframes amt4 {
            0% {transform: rotateY(0deg)}
            50% {transform: rotateY(-150deg)}
            100% {transform: rotateY(0deg)}
        }
        @keyframes amt5 {
            0% {transform: rotateY(0deg)}
            50% {transform: rotateY(-140deg)}
            100% {transform: rotateY(0deg)}
        }
        p{
            margin-top: 550px;
            font-size: 25px;
            color: #8dc2f4;
            font-style: italic;
        }
    </style>

// HTML

<body>
<div class="images">
    <div class="pageBox pageBox1">
        <div class="page page1"></div>
    </div>
    <div class="pageBox pageBox2">
        <div class="page page2"></div>
    </div>
    <div class="pageBox pageBox3">
        <div class="page page3"></div>
    </div>
    <div class="pageBox pageBox4">
        <div class="page page4"></div>
    </div>
    <div class="pageBox pageBox5">
        <div class="page page5"></div>
    </div>
    <div class="pageBox pageBox6">
        <div class="page page6">
            <div class="page page7">
                <p>yuxiaohu 2017.9.22</p>
            </div>
        </div>
    </div>
</div>
</body>

3D animation 书

推荐阅读更多精彩内容