An ultra-cool 3D form for pure CSS3

Today to share a pure CSS3 implementation of the ultra-bright 3D form. The effect page is loaded 3d 45 degrees tilt, when the mouse passes when the form animation back. The effect is very bright, look together:

Online preview Source Download

The implemented code.

HTML code:

  <DivID= "Face">        <DivID= "Content">            <P>                <inputtype= "text"placeholder= "Name" /></P>            <P>                <inputtype= "text"placeholder= "Email" /></P>            <P>                <textareaplaceholder= "Comments"></textarea></P>            <P>                <inputtype= "button"value= "SUBMIT" /></P>        </Div>    </Div>

CSS3 Code:

Body{-webkit-perspective: the;Perspective: the;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: the;-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; }

Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/11462

An ultra-cool 3D form for pure CSS3