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 -100.........完整代码请登录后点击上方下载按钮下载查看