`
m47cat
  • 浏览: 12282 次
社区版块
存档分类
最新评论

apple-like login form - css3 3d 翻牌效果

css3html5 
阅读更多
按照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是正面时，对password form设置transfor:rotateY(180deg)翻到反面。
相反对password form设置transfor:rotateY(0deg)，对login formtransfor:rotateY(-180deg)逆时针翻转。
并且对form设置backface-visibility: hidden;背面不可见

2.ie兼容性：对按钮添加filter和-ms-filter兼容ie8和9

3.ie（到ie9）不支持3d效果，用supportCSS3D判断浏览器类型，为ie时用$("#loginForm").toggle()控制翻转，并且要设置form的opacity和z-index,否则ie翻转不正常...==||
！用一个id控制toggle,开始写成了第一次$("#loginForm").toggle()和第二次$("#passForm").toggle()。。。

4.边框3d效果，设置animation:boxshadowAni 2s infinite;
@-moz-keyframes boxshadowAni{
0%{ box-shadow: 0;}
50%{ box-shadow:0 0 8px #008aff;}
100%{ box-shadow:0;}
}
分享到：
jsp页面间参数传递
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics