CSS3实现3D旋转动态显示登录注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
* {
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,0,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,-.55,.265,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,0,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,0,0.1) inset;
}
</style>
</head>
<body>
<div class="form-card-container">
<div class="form-card">
<div class="form-card_front">
<a href="#" class="form_swap-link loginBtn">注册</a>
<form class='form' action="post">
<input value="" id="inuptUser" maxlength="20" />
<label for="inuptUser" ></label>
<input value="" type="password" id="inuptPwd" type="password" maxlength="20" />
<label for="inuptPwd" ></label>
<input type="submit" value="登录" />
</form>
</div>
<div class="form-card_back">
<a href="#" class="form_swap-link regBtn" >登录</a>
<form class='form' action="post">
<input value="" id="regUser" maxlength="20" />
<label for="regUser" ></label>
<input value="" id="regPwd" type="password" maxlength="20" />
<label for="regPwd" ></label>
<input value="" id="confirmPwd" type="password" maxlength="20" />
<label for="confirmPwd" ></label>
<input type="submit" value="注册" />
</form>
</div>
</div>
</div>
<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script>/*Javascript代码片段*/
$('.form_swap-link').click(function() {
$('.form-card').toggleClass('form-card-flipped');
});
</script>
</body>
</html>
.