apple-like login form - css3 3d 翻牌成效
日期：2014-05-17 浏览次数：21053 次
apple-like login form - css3 3d 翻牌效果
按照apple-like login form 做了一个css3 3d 翻牌的效果
link: http://demo.tutorialzine.com/2012/02/apple-like-login-form/
1.对loginForm和passForm添加toggle class flipped来控制翻转，
login form
按照apple-like login form 做了一个css3 3d 翻牌的效果
link: http://demo.tutorialzine.com/2012/02/apple-like-login-form/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.login_content{
position: relative;
margin: 0 auto;
height:321px;
width: 288px;
text-align: center;
}
.login_content form{
animation: boxshadowAni 2s infinite;
-moz-animation: boxshadowAni 2s infinite;
backface-visibility: hidden;
-moz-backface-visibility:hidden;
transform-style:perserve-3d;
-moz-transform-style:perserve-3d;
transition: 1s;
-moz-transition:1s;
position:absolute;
width:100%;
height:321px;
top:0;
left: 0;
}
@-moz-keyframes boxshadowAni{
0%{ box-shadow: 0;}
50%{ box-shadow:0 0 8px #008aff;}
100%{ box-shadow:0;}
}
#loginForm{
opacity: 1;
z-index: 100;
display: block;
background: url("assets/images/login_form_bg.jpg") no-repeat scroll 0 0 transparent;
}
.loginPh{
background: transparent;
text-indent: 8px;
border:none;
left: 26px;
}
#loginEmail{
top:177px;
position: absolute;
}
#loginPassword{
top: 215px;
position: absolute;
}
.loginBtn{
background: -moz-linear-gradient(center bottom , #50667F 50%, #576D88 50%, #6A819B 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#50667F, endColorstr=#6A819B);/*IE <9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#50667F, endColorstr=#6A819B)";/*IE8+*/
color: #FFFFFF;
top:262px;
left:26px;
width: 236px;
height: 36px;
cursor: pointer;
position: absolute;
border: none;
border-radius: 5px;
box-shadow: 0 1px 1px #888888;
font: 14px/36px 'Segoe UI Light','Segoe UI',Arial,sans-serif;
}
#passForm{
background: url("assets/images/recover_form_bg.jpg") no-repeat scroll 0 0 transparent;
z-index: 1;
opacity: 0;
transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
#toForgetPW{
position: absolute;
right: 0;
height: 40px;
width: 40px;
}
#toLogin{
position: absolute;
left: 0;
height: 40px;
width: 40px;
}
.login_content.flipped #loginForm{
opacity: 0;
transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
.login_content.flipped #passForm{
opacity: 1;
transform: rotateY(0edg);
-moz-transform: rotateY(0deg);
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function(){
var support = supportCSS3D()
var container = $(".login_content")
// A helper function that checks for the
// support of the 3D CSS3 transformations.
function supportCSS3D() {
var props = [
'perspectiveProperty', 'WebkitPerspective', 'MozPerspective'
], testDom = document.createElement('a');
for(var i=0; i<props.length; i++){
if(props[i] in testDom.style){
return true;
}
}
return false;
}
$("#toForgetPW").click(function(e){
container.toggleClass("flipped")
if(!support){
$("#loginForm").toggle()
}
e.preventDefault();
})
$("#toLogin").click(function(e){
container.toggleClass("flipped")
if(!support){
$("#loginForm").toggle()
}
e.preventDefault();
})
})</script>
<meta charset=utf-8 />
<title>apple css3d form</title>
</head>
<body>
<div class="login_content">
<form id="loginForm">
<a id="toForgetPW" href="#"></a>
<input name="email" id="loginEmail" class="loginPh" value="Email"/>
<input name="password" id="loginPassword" class="loginPh" value="Password"/>
<div><input name="submit" type="submit" class="loginBtn" value="Login"></input></div>
</form>
<form id="passForm"><a id="toLogin" href="#"></a></form>
</div>
</body>
</html>
1.对loginForm和passForm添加toggle class flipped来控制翻转，
login form
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
