按照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;}
}