CSS3-3D-form

最新推荐文章于 2024-06-25 07:15:00 发布

lux_lu

最新推荐文章于 2024-06-25 07:15:00 发布

阅读量486

点赞数

分类专栏： CSS3

CSS3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

----index.html---

<!DOCTYPE html>
<link rel="stylesheet" href="css/css3_3d.css" />
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <body>
       <div id="face">
           <div id="content">
               <p>
                   <input type="text" placeholder="Name" />
               </p>
               <p>
                   <input type="text" placeholder="Email" />
               </p>
               <p>
                   <textarea placeholder="Comments"></textarea>
               </p>
               <p>
                   <input type="button" value="SUBMIT" />
               </p>
           </div>
       </div>
   </body>
</html>

----css3_3d.css---

body{
   -webkit-perspective: 3000;
   perspective: 3000;
   overflow: hidden;
}
#face{
   margin: 0;
   padding: 0;
   width: 320px;
   height: 400px;
   -webkit-transform: rotateX(60deg) rotateZ(-50deg);
   transform: rotateX(60deg) rotateZ(-50deg);
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
   -webkit-transition: all 2s;
   transition: all 2s;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   margin: auto;
}
#face:hover{
   -webkit-transform: rotateX(0deg) rotateZ(0deg);
   transform: rotateX(0deg) rotateZ(0deg);
}
#content{
   width: 320px;
   height: 375px;
   padding: 15px 0px;
   background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%);
   background: linear-gradient(to bottom, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%);
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
   text-align: center;
}
#content:before, #content:after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: inherit;
}
#content:before{
   -webkit-transform-origin: left center;
   -ms-transform-origin: left center;
   transform-origin: left center;
   -webkit-transform: rotateY(90deg);
   transform: rotateY(90deg);
   width: 15px;
}
#content:after{
   -webkit-transform-origin: bottom center;
   -ms-transform-origin: bottom center;
   transform-origin: bottom center;
   -webkit-transform: rotateX(90deg);
   transform: rotateX(90deg);
   height: 15px;
   top: auto;
   bottom: 0;
   background-position: bottom center;
}
p input[type='text'], p textarea{
   width: 258px;
   font-size: 18px;
   padding: 10px;
   margin-top: 10px;
   border: 1px solid #fff;
}
p input[type='text']{
   height: 24px;
}
p textarea{
   height: 100px;
   resize: none;
}
p input[type='button']{
   width: 278px;
   border: 4px solid #fff;
   background-color: #51A8FF;
   color: #fff;
   font-size: 24px;
   padding: 14px 0px;
   font-weight: 700;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
}
p input[type='button']:hover{
   background: #9ECEFF;
   color: #222;
}
p input:focus, textarea:focus{
   outline: 4px solid #007FFF;
}