Красивая CSS форма для логина с эффектом 3д трансформации

В этом уроке мы сделаем форму для логина с эффектом 3D поворота

Наша форма будет состоять из двух частей: форма для логина и для восстановления пароля. Эффект будет работать так: нам будет видна только одна форма, но при нажатии на ссылку, будет появляться другая и исчезнет текущая, с помощью поворота вокруг оси Y. Т.о. создастся эффект 3d поворота.

Мы будем использовать jQuery для отслеживания нажатия по ссылке и замены имени CSS класса у формы.

HTML

Разметка формы:

<div id="formContainer">
	<form id="login" method="post" action="./">
		<a href="#" id="flipToRecover">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">Forgot?</a>
		<input type="text" name="recoverEmail" id="recoverEmail" placeholder="Your Email" />
		<input type="submit" name="submit" value="Recover" />
	</form>
</div>

jQuery

Прежде всего, jQuery проверит поддержку CSS эффектов.

$(function(){

	// Проверяем поддержку CSS
	$.support.css3d = supportsCSS3D();

	var formContainer = $('#formContainer');

	// следим за нажатием на ссылку
	$('.flipLink').click(function(e){

		// переворачиваем форму
		formContainer.toggleClass('flipped');

		// если нет поддержки - прячем текущую форму
		if(!$.support.css3d){
			$('#login').toggle();
		}
		e.preventDefault();
	});

	formContainer.find('form').submit(function(e){
		// предотвращаем отправку формы
		e.preventDefault();
	});

	// функция проверки поддержки
	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;
	}
});

CSS

#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;

	/* Включаем 3d пространство для трансформации */
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;

	/* если форма перевернута - прячем её */
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	/* включаем плавную анимацию */
	-moz-transition:0.8s;
	-webkit-transition:0.8s;
	transition:0.8s;

	/* для Firefox */
	-moz-animation: pulse 2s infinite;

	/* для Chrome и Safari */
	-webkit-animation: pulse 2s infinite;
}

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

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

	/* Вращаем форму для восстановления */
	-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 10px #008aff;}
	100%{	box-shadow:0 0 1px #008aff;}
}
#formContainer.flipped #login{

	opacity:0;

	/**
	 * Вращаем логин форму
	 * когда добавлен класс flipped
	 */

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

#formContainer.flipped #recover{

	opacity:1;

	/* вращаем форму восстановления, делаем видимой */
	-moz-transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}

В комментариях к коду описаны ключевые моменты.

На этом все 🙂 Не пропустите новые уроки!