CSS3实现3D旋转动态显示登录注册

* {

Box-sizing: border-Box;

-webkit-font-smoothing: antialiased

}

body,html {

width: 100%;

height: 100%

}

body {

position: relative;

background: radial-gradient(#666,#222);

}

.form-card-container {

margin: 0 auto;

height: 375px;

-webkit-perspective: 300px;

perspective: 300px

}

.form_swap-link {

position: absolute;

margin-top: -33px;

margin-left: 0;

width: 50px;

height: 30px;

border-top-right-radius: 4px;

border-bottom-right-radius: 4px;

background: #00a7fe;

Box-shadow: 0 1px 3px rgba(0,.3);

color: #fff;

text-align: center;

text-decoration: none;

font: 15px Arial,"微软雅黑";

line-height: 30px

}

.form_swap-link:active {

animation: myfirst 1s

}

@keyframes myfirst {

0% {

font-size: 10px

}

50% {

font-size: 20px

}

}

.form-card {

position: absolute;

top: 50%;

left: 50%;

margin: 0 0 0 -150px;

width: 300px;

height: 250px;

-webkit-transition: -webkit-transform .8s;

transition: transform .8s;

-webkit-transition-timing-function: cubic-bezier(.68,-.55,.265,1.55);

transition-timing-function: cubic-bezier(.68,1.55);

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d

}

@keyframes user_animation {

0% {

margin-left: 30px

}

}

.form-card.form-card-flipped {

-webkit-transform: rotateX(-180deg);

transform: rotateX(-180deg)

}

.form-card_front:before {

content: "会员登录"

}

.form-card_back:before,.form-card_front:before {

display: block;

margin-top: 20px;

width: 300px;

color: #222;

text-align: center;

font: 21px Arial,"微软雅黑"

}

.form-card_back:before {

content: "快速注册"

}

.form-card_front input {

margin: 15px auto

}

.form-card_back input,.form-card_front input {

display: block;

width: 230px;

height: 30px;

outline: 0;

border: 1px solid #ddd;

border-radius: 4px;

text-indent: 5px;

font-size: 15px;

transition: all 1s ease

}

.form-card_back input {

margin: 10px auto

}

.form-card_back input:focus,.form-card_front input:focus {

border: 1px solid #229ffd

}

.form-card_back,.form-card_front {

position: absolute;

display: block;

width: 100%;

height: 100%;

border-radius: 4px;

background: #f5f5f5;

Box-shadow: 0 1px 3px rgba(0,.3);

-webkit-backface-visibility: hidden;

backface-visibility: hidden

}

.form-card_back {

-webkit-transform: rotateX(180deg);

transform: rotateX(180deg)

}

#inuptUser:focus+label[for*=inuptUser]:before {

margin-top: -40px;

margin-left: 220px;

height: 20px;

color: #ddd;

content: '用户名'

}

#inuptPwd:focus+label[for*=inuptPwd]:before,#inuptUser:focus+label[for*=inuptUser]:before {

position: absolute;

display: block;

width: 150px;

font: 13px Arial,"微软雅黑";

transition: all .3s ease;

animation: user_animation 1s

}

#inuptPwd:focus+label[for*=inuptPwd]:before {

margin-top: -40px;

margin-left: 230px;

height: 26px;

color: #ccc;

content: '密码'

}

#regUser:focus+label[for*=regUser]:before {

position: absolute;

display: block;

margin-top: -35px;

margin-left: 220px;

width: 150px;

height: 20px;

color: #ddd;

content: '用户名';

font: 13px Arial,"微软雅黑";

transition: all .3s ease;

animation: user_animation 1s

}

#regPwd:focus+label[for*=regPwd]:before {

margin-left: 230px;

content: '密码'

}

#confirmPwd:focus+label[for*=confirmPwd]:before,#regPwd:focus+label[for*=regPwd]:before {

position: absolute;

display: block;

margin-top: -35px;

width: 150px;

height: 26px;

color: #ddd;

font: 13px Arial,"微软雅黑";

transition: all .3s ease;

animation: user_animation 1s

}

#confirmPwd:focus+label[for*=confirmPwd]:before {

margin-left: 205px;

content: '确认密码'

}

input[type="submit"] {

color:#555;

margin:10px auto;

display: block;

cursor: pointer;

width:230px;

height:30px;

color:#fff;

border-radius:4px;

border:1px solid #0d7bc4;

background: -webkit-linear-gradient( top,#229ffd,#1f86d4);

-webkit-Box-sizing: border-Box;

-moz-Box-sizing: border-Box;

Box-sizing: border-Box;

-webkit-transition-property: all;

transition-property: all;

-webkit-transition-duration: 0.05s;

transition-duration: 0.05s;

}

input[type="submit"]:active {

appearance: none;

text-decoration: none;

-webkit-Box-shadow:5px 5px 5px rgba(0,0.1) inset;

}

$('.form_swap-link').click(function() {

$('.form-card').toggleClass('form-card-flipped');

});