首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

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

2013-01-26 
apple-like login form - css3 3d 翻牌效果按照apple-like login form 做了一个css3 3d 翻牌的效果link: h

apple-like login form - css3 3d 翻牌效果
按照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 href="#"></a><input name="email" id="loginEmail" value="Email"/><input name="password" id="loginPassword" value="Password"/><div><input name="submit" type="submit" 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;}
}

热点排行