CSS3和jQuery制作翻转表单

CSS3中的Transform应用可以说比较广泛了，但其中的3D Transforms去年就听说了，但一直没有使用过。今天在Tutorialzine看到了一篇这方面的教程《http://tutorialzine.com/2012/02/apple-like-login-form/》。自己动手试了一回，效果蛮好的。现在贴上来与大家一起分享。

这篇教程主要使用了CSS3中的3D transform属性和jQuery制作了一个翻转表单的效果。

思路

首先有两个表单（此处是“登录表单”和“找回密码表单”），高明之处是，仅仅只有一个表单呈现在大家面前。但当你点击了“ribbons”(本例中的“forget?”链接)，将会触发表单在Y轴上旋转，此时背面的表单旋转到正面显示出来，当你在点击一次链接时，回到当初的表单，具体如下图所示：

在这个链接点击时，将使用jQuery事件给这两个“表单”的容器上添加一个类名，用来控制他们显示与隐藏。具体的请看下面的代码。

HTML Markup

结构很简单，只要两个“form”，具体“form”中的内容是什么？大家可以根据自己的需求去写，这里使用了“登录”和“找回密码”的两个表单：

		<div id="formContainer">
		  <form id="login" method="post" action="./">
		    <a href="#" id="flipToRecover" class="flipLink">Forgot?</a>
		    <input type="text" name="loginEmail" id="loginEmail" placeholder="Email" />
		    <input type="password" name="loginPass" id="loginPass" placeholder="Password" />
		    <input type="submit" name="submit" value="Login" />
		  </form>
		  <form id="recover" method="post" action="./">
		    <a href="#" id="flipToLogin" class="flipLink">Forgot?</a>
		    <input type="text" name="recoverEmail" id="recoverEmail" placeholder="Your Email" />
		    <input type="submit" name="submit" value="Recover" />
		  </form>
		</div>
	

CSS Code

		/*-------------------------
		Simple reset
		--------------------------*/
		*{
		margin:0;
		padding:0;
		}
		/*-------------------------
		General Styles
		--------------------------*/
		html{
		background:#161718;
		}
		body{
		min-height: 600px;
		padding: 200px 0 0;
		font:14px/1.3 'Segoe UI',Arial, sans-serif;
		}
		a, a:visited {
		text-decoration:none;
		outline:none;
		color:#54a6de;
		}
		a:hover{
		text-decoration:underline;
		}
		/*----------------------*\
		Form style
		\*----------------------*/

		#formContainer {
			width: 288px;
			height: 321px;
			margin: 0 auto;
			position: relative;
			-moz-perspective: 800px;
			-webkit-perspective: 800px;
			perspective: 800px;
		}
		#formContainer form {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			/*enabling 3d space for the transforms*/
			-moz-transform-style: preserve-3d;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
			/*when the forms are flipped, they will be hidden*/
			-moz-backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			/*enabling a smooth animated transition*/
			-moz-transition: 0.8s;
			-webkit-transition: 0.8s;
			transition: 0.8s;
			/*configure a keyframe animation*/
			-moz-animation: pulse 2s infinite;
			-webkit-animation: pulse 2s infinite;
			animation: pulse 2s infinite;
		}
		#login {
			background: url(login_form_bg.jpg) no-repeat;
			z-index: 100;
		}
		#recover {
			background: url(recover_form_bg.jpg) no-repeat;
			z-index:1;
			opacity:0;
			/*rotating the recover password form by default*/
			-moz-transform:rotateY(180deg);
			-webkit-transform:rotateY(180deg);
			transform:rotateY(180deg);
		}
		/*firefox keyframe animation*/
		@-moz-keyframes pulse{
			0%{
				box-shadow: 0 0 1px #008aff;
			}
			50%{
				box-shadow: 0 0 8px #008aff;
			}
			100%{
				box-shadow: 0 0 1px #008aff;
			}
		}
		/*webkit keyframe animation*/
		@-webkit-keyframes pulse{
			0%{
				box-shadow: 0 0 1px #008aff;
			}
			50%{
				box-shadow: 0 0 8px #008aff;
			}
			100%{
				box-shadow: 0 0 1px #008aff;
			}
		}
		#formContainer.flipped #login {
			opacity:0;
			/*rotating the login form when the flipped class is added to the container*/
			-moz-transform: rotateY(-180deg);
			-webkit-transform: rotateY(-180deg);
			transform: rotateY(-180deg);
		}
		#formContainer.flipped #recover {
			opacity:1;
			/*rotating the recover div into view*/
			-moz-transform: rotateY(0deg);
			-webkit-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
		/*-------------------------------*\
		inputs,buttons,links
		\*-------------------------------*/
		#login .flipLink,
		#recover .flipLink{
			height: 65px;
			overflow:hidden;
			position: absolute;
			right:0;
			text-indent: -9999px;
			top: 0;
			width: 65px;
		}
		#recover .flipLink{
			right: auto;
			left: 0;
		}
		#login::after {
			width: 115px;
			height: 16px;
			content:"Click here to spin!";
			position: absolute;
			right: -120px;
			top: 22px;
			color: #fff;
		}
		input[type=text],
		input[type=password]{
			font: 15px "Segoe UI",Arial,sans-serif;
			border: none 0;
			background: none;
			height: 36px;
			left: 26px;
			position: absolute;
			top: 176px;
			width:234px;
			text-indent:8px;
			text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
			color: #eee;
			outline: none;
		}
		#loginPass {
			top: 215px;
		}
		#recoverEmail {
			top: 215px;
		}
		input[type=submit]{
			/* Submit button */
			opacity:0.9;
			position:absolute;
			top:262px;
			left:25px;
			width: 239px;
			height:36px;
			cursor:pointer;
			border-radius:6px;
			box-shadow:0 1px 1px #888;
			border:none;
			color:#fff;
			font:14px/36px 'Segoe UI Light','Segoe UI',Arial,sans-serif;
			/* CSS3 Gradients */
			background-image: linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);
			background-image: -o-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);
			background-image: -moz-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);
			background-image: -webkit-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);
			background-image: -ms-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);
			background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5, rgb(80,102,127)),color-stop(0.5, rgb(87,109,136)),color-stop(1, rgb(106,129,155)));
			}
			input[type=submit]:hover{
			opacity:1;
			}
			input::-webkit-input-placeholder {
			color:#eee;
			}
	

上面就是此例使用的所用样式代码，但有几点我特意拿出来与大写一起看看。

1、perspective 透视的应用

首先在“form”的容器上使用了一个“perspective”透视效果。这个属性对定位元素或者变换的子元素进行和变换函数“perspective(number)”相同的变换。数值越小越能看得清楚，数值越大越不明显，具体大家可以通过“firebug”将这个属性的值调大调小，这样你就明白他的功能了。（^-^具体我也说不明白，自己测试一下吧）：

		#formContainer{
			width:288px;
			height:321px;
			margin:0 auto;
			position:relative;

			-moz-perspective: 800px;
			-webkit-perspective: 800px;
			perspective: 800px;
		}
	

2、preserve-3d和backface的应用

		#formContainer form{
			width:100%;
			height:100%;
			position:absolute;
			top:0;
			left:0;

			/* Enabling 3d space for the transforms */
			-moz-transform-style: preserve-3d;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;

			/* When the forms are flipped, they will be hidden */
			-moz-backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;

			/* Enabling a smooth animated transition */
			-moz-transition:0.8s;
			-webkit-transition:0.8s;
			transition:0.8s;

			/* Configure a keyframe animation for Firefox */
			-moz-animation: pulse 2s infinite;

			/* Configure it for Chrome and Safari */
			-webkit-animation: pulse 2s infinite;
		}

		#login{
			background:url('login_form_bg.jpg') no-repeat;
			z-index:100;
		}

		#recover{
			background:url('recover_form_bg.jpg') no-repeat;
			z-index:1;
			opacity:0;

			/* Rotating the recover password form by default */
			-moz-transform:rotateY(180deg);
			-webkit-transform:rotateY(180deg);
			transform:rotateY(180deg);
		}
	

“preserve-3d”是3D transform中的“transform-style”中的样式之一，他设置内嵌的元素在 3D 空间如何呈现：保留 3D ,主要是用来给子元素创建一个“3D”场景，不过想要起作用，还是要配合“perspective”一起使用。

backface这个属性在这里作用很重要，设置进行转换的元素的背面在面对用户时是否可见：隐藏

3、flipped后的Form样式

		#formContainer.flipped #login{
			opacity:0;
			/**
			 * Rotating the login form when the
			 * flipped class is added to the container
			 */

			-moz-transform:rotateY(-180deg);
			-webkit-transform:rotateY(-180deg);
			transform:rotateY(-180deg);
		}

		#formContainer.flipped #recover{

			opacity:1;

			/* Rotating the recover div into view */
			-moz-transform:rotateY(0deg);
			-webkit-transform:rotateY(0deg);
			transform:rotateY(0deg);
		}
	

点击“ribbons”链接后，给表单容器添加一个类名“flipped”,“flipped”下的样式，将用来控制表单“#login”和“recover”进行Y轴的180度旋转。当“#login”表单是正面时，点击“链接”后，“#recover”表单将会旋转到正面，当“#recover”在正面时，点击“链接”后，将“#login”表单旋转到正面，依此类推。大家可以仔细看看，我们此处是两个表单正反面的旋转，而并不是隐藏其中一个，显示另外一个。

jQuery Code

		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//checking for css 3d transformation support
				$.support.css3d = supportsCSS3D();
				var formContainer = $("#formContainer");
				//Listening for clicks on the ribbon links
				$(".flipLink").click(function(e){
					//flipping the forms
					formContainer.toggleClass("flipped");
					//if there is no css3 3d support, simply hide the login form (exposing the recover one)
					if(!$.support.css3d){
						$("#login").toggle();
					}
					e.preventDefault();
				});
				
				formContainer.find("form").submit(function(e){
					//Preventing form submissions.if you implement a backedn,you will want to remove this code
					e.preventDefault();
				});
				
				//a helper function that checks for the support of the 3d css3 transformations
				function supportsCSS3D(){
					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;
				}
			});
			
		</script>
	

上面就是本例使用到的所有jQuery代码了。大家可以看看。（^-^）我不太懂，所以不多说，怕误人子弟。这部分大家看代码吧，要比我说的更明白。

浏览器支持

如果你不使用IE浏览器，而是使用的现代浏览器“safari”、“chrome”、“firefox”这些浏览器对CSS3 3D都支持的比较好了。

DEMO

如果您没有看明白我说的（说实在的，我自己对那几个属性也还不完全理解），不仿看看DEMO效果：

当然，大家还可以下载源码到本地慢慢研究。或者参阅原教程。

这个实例是本站第一个有关于3D旋转方面的教程，说的不太明了，希望大家能根据原文进行了解，如果您有更好的建议，或者上文有不对的地方，还请大家告诉我，您可以直接在下面的评论中留言。

最后再次感谢Martin Angelov给我发的教程《Apple-like Login Form with CSS 3D Transforms》。

如需转载烦请注明出处：W3CPLUS