css实现三维3d卷纸表单动画弹出效果代码-html代码-BFW代码库

代码语言：html
代码描述：css实现三维3d卷纸表单动画弹出效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
    @font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1526190632906'); /* IE9*/
  src: url('iconfont.eot?t=1526190632906#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAVQAAsAAAAACAwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kjeY21hcAAAAYAAAABnAAABnM/5bV1nbHlmAAAB6AAAAWEAAAHAMKCeoWhlYWQAAANMAAAALwAAADYRWypGaGhlYQAAA3wAAAAcAAAAJAfeA4VobXR4AAADmAAAABAAAAAQD+kAAGxvY2EAAAOoAAAACgAAAAoBVgCwbWF4cAAAA7QAAAAfAAAAIAETAF1uYW1lAAAD1AAAAUUAAAJtPlT+fXBvc3QAAAUcAAAAMgAAAFDtZzJ5eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sU4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDz7xNzwv4EhhrmBoQEozAiSAwA1+A1geJzFkNENgCAMRK8UDTGO4qdxEEbwyxGYuAOwALaFHybgyCvt5ZISAGwAWLmUCNAHgulVl9xnHO5HPDonPUHvIllqa1NnIk8k79iStGOZaN3qWafXe0z232WgT5TcMV9qB+EHcYYUgwB4nGWPsU7CUBSGz3+vbQGhtS1woRVKgXI1aBMRcTDCggPGwcTJODnpoquLAw5GExl8BmPiS/AsJkZew+pVF4wnJ+fL+f+T/DmkEX2+8SkvkUsrtEFDOiSC3kbdZBWEshuzNgqhVhB5k8uGDI1GPea7EHU9X+z0ui2hG7oFE1Vshp2ejJnEVrfPdtApVoCy7x050bLDH5Epyeptss+eUAgay1Z/PRmtDfKdmpu6yjpO2XEmKV3TUowtWCYuRDGtpTN68qxZXmEarLIA2bL0Do5zNd85ve9eViKRBsZjuH7NfBnYnq362iu6TtlYyqVKXq7RzONqtlhys5XWO6li34OPOZFFgfoyNGHYVYiwj207hqvWMIa01RoqmVNCvREw6rFfZtD0E/KbUGTf5KTM+aOPmzlX8W+m+J8JachtAcFek+HeCWMne5j+MLkDJtE5FiJOSp13P2bAQ3SmLKIvSXFC4QAAAHicY2BkYGAA4nnLg6Pi+W2+MnCzMIDAddnPGgj6/0MWBmYJIJeDgQkkCgAffgnKAHicY2BkYGBu+N/AEMPCAAJAkpEBFbAAAEcKAm0EAAAAA+kAAAQAAAAEAAAAAAAAAAB2ALAA4AAAeJxjYGRgYGBhCGRgZQABJiDmAkIGhv9gPgMAERIBcQB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICFkYmRmZGFkZWBsYI7rbSiNDEvG4jTRZDYIEZVRn5eOgMDAA7qDfcAAA==') format('woff'),
  url('iconfont.ttf?t=1526190632906') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1526190632906#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-fuxuankuang:before { content: "\e6f2"; }

.icon-fuxuankuangxuanzhong:before { content: "\e652"; }


        * {
            margin: 0;
            padding: 0;
        }

        body {
            perspective: 1400px;
            perspective-origin: 40% 50%;
        }

        div {
            transform-style: preserve-3d;
            font-size: 20px;
        }

        .wrap {
            width: 800px;
            height: 800px;
            margin: -70px auto;
            position: relative;
            transform-origin: top;
            transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg) scale(0) translate3d(0px,0px,-500px);
            border: 0;
            transition: 1s;
        }

        @keyframes move {
            0% {
                transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg) scale(0) translate3d(0px,0px,-500px);
            }

            100% {
                transform: rotateX(0deg) rotateY(20deg) rotateZ(0deg) scale(.6) translate3d(0px,0px,0px);
            }
        }

        #btn1 {
            width: 180px;
            height: 50px;
            display: block;
            margin: 100px auto;
            border: 0;
            outline: 0;
            background-color: skyblue;
            border-radius: 10px;
            color: #fff;
            cursor: pointer;
            transition: 1s;
        }

        .wrap .shadow {
            position: absolute;
            width: 800px;
            height: 1200px;
            transform: translateZ(-500px);
            box-shadow: 100px 100px 200px #dfdfdf,100px -100px 200px #dfdfdf,-100px 100px 200px #dfdfdf,-100px -100px 200px #dfdfdf;
            background-color: #dfdfdf;
            border: 0;
            top: -100px;
            transition: 2s 2s;
            opacity: 0;
        }

        @keyframes change1 {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .box {
            width: 800px;
            height: 50px;
            line-height: 50px;
            background-color: #fff;
            border: 1px solid #fff;
            transform-origin: top;
            position: absolute;
            top: 51px;
            left: 0;
        }

        @keyframes change2 {
            0% {
                background-color: #fff;
            }

            30% {
                background-color: #f5eedc;
            }

            100% {
                background-color: #87ceeb;
            }
        }

        .box1 {
            transform: rotateX(-70deg);
        }

        .box2 {
            transform: rotateX(-50deg);
        }

        .box3 {
            transform: rotateX(-50deg);
        }

        .box4 {
            transform: rotateX(-20deg);
        }

        .box5 {
            transform: rotateX(-35deg);
        }

        .box6 {
            transform: rotateX(-60deg);
        }

        .box7 {
            transform: rotateX(-50deg);
        }

        .box8 {
            transform: rotateX(-15deg);
        }

        .box9 {
            transform: rotateX(-2deg);
        }

        .box10 {
            transform: rotateX(-1deg);
        }

        .box11 {
            transform: rotateX(-1deg);
        }

        .box12 {
            transform: rotateX(-1deg);
        }

        .box13 {
            transform: rotateX(-1deg);
        }

        .box14 {
            transform: rotateX(-1deg);
        }

        .box15 {
            transform: rotateX(-1deg);
        }

        .box16 {
            transform: rotateX(0deg);
        }

        .box17 {
            transform: rotateX(0deg);
        }

        .box18 {
            transform: rotateX(-1deg);
        }

        .box19 {
            transform: rotateX(-1deg);
        }

        .box20 {
            transform: rotateX(-1deg);
        }

        .box21 {
            transform: rotateX(-1deg);
        }

        .box22 {
            transform: rotateX(-1deg);
        }

        .box23 {
            transform: rotateX(-1deg);
        }

        .box24 {
            transform: rotateX(-1deg);
        }

        .box25 {
            transform: rotateX(-1deg);
        }

        .box26 {
            transform: rotateX(-1deg);
        }

        .box27 {
            transform: rotateX(-1deg);
        }

        .box28 {
            transform: rotateX(-10deg);
        }

        .box29 {
            transform: rotateX(-15deg);
        }

        .box30 {
            transform: rotateX(-45deg);
        }

        .box10 h4 {
            text-align: center;
            color: #fff;
            font-size: 30px;
        }

        .con {
            width: 800px;
            height: 50px;
            top: 0;
            cursor: pointer;
        }

            .con:hover {
                background-color: #f5eedc;
            }

        .icon2 {
            opacity: 0;
        }

        .checked {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 20px;
        }

        .iconfont {
            font-size: 45px;
            position: absolute;
            color: deeppink;
            transition: 0.6s;
        }

        .text {
            width: 600px;
            margin-left: 100px;
            transition: 0.6s;
            text-align: left;
        }

        .con:hover .text {
            text-indent: 20px;
        }

        #all {
            display: block;
            width: 100px;
            margin-left: 80px;
        }
    </style>
</head>
<body>
    <button id="btn1">开始选择书单</button>
    <div class="wrap">
        <div class="shadow"></div>
        <div class="box1 box">
            <div class="box2 box">
                <div class="box3 box">
                    <div class="box4 box">
                        <div class="box5 box">
                            <div class="box6 box">
                                <div class="box7 box">
                                    <div class="box8 box">
                                        <div class="box9 box">
                                            <div class="box10 box">
                                                <h4>请选择要购买的书籍</h4>
                                                <div class="box11 box">
                                                    <div class="box12 box">
                                                        <div class="con">
                                                            <div class="checked">
                                                                <i class="iconfont icon-fuxuankuang icon1"></i>
                                                                <i class="iconfont icon-fuxuankuangxuanzhong icon2"></i>
                                                            </div>
                                                            <p class="text">1. JavaScript DOM 编程艺术</p>
                                                        </div>
                                                        <div class="box13 box">
                                                            <div class="con">
                                                                <div class="checked">
                                                                    <i class="iconfont icon-fuxuankuang icon1"></i>
                                                                    <i class="iconfont icon-fuxuankuangxuanzhong icon2"></i>
                                                                </div>
                                                                <p class="text">2. JavsScript高级程序设计（第三版）</p>
                                                            </div>
                                                            <div class="box14 box">
                                                                <div class="con">
                                                                    <div class="checked">
                                                                        <i class="iconfont icon-fuxuankuang icon1"></i>
                                                                        <i class="iconfont icon-fuxuankuangxuanzhong icon2"></i>
                                                                    </div>
                                                                    <p class="text">3. JavaScript设计模式与开发实践</p>
                                                                </div>
                                                                <div class="box15 box">
                                                                    <div class="con">
                                                                        <div class="checked">
                                                                            <i class="iconfont icon-fuxuankuang icon1"></i>
                                                                            <i class="iconfont icon-fuxuankuangxuanzhong icon2"></i>
                                                                        </div>
                                                                        <p class="text">4. 学习Javascript数据结构与算法</p>
                                                                    </div>
                                                                    <div class="box16 box">
                                  .........完整代码请登录后点击上方下载按钮下载查看