Форма входа с CSS 3D преобразованием
В этом уроке мы увидим, как можно использовать 3D преобразования, чтобы
создать интересную форму входа.
Мы будем иметь две формы - логина и пароля, видимую с одной
стороны. Нажатие на ссылку (ленты в примере), вызовет CSS3 вращения по оси Y,
которое откроет другую часть формы эффектом переворота листа.
СМОТРЕТЬ ДЕМО СКАЧАТЬ
ИСХОДНИК
Мы будем использовать JQuery для фиксирования кликов по
ссылкам, и добовлять или удалять имя пользователя на элемент контейнера формы.
С помощью CSS мы будем применять Y преобразования (горизонтальное вращение) в
обеих формах, но с разницей в 180 градусов в зависимости от класса. Это
позволит сделать формы появляющиеся на противоположных сторонах мнимой
платформы.
Разметка
Мы нуждаемся в двух формах - войти и восстановить . Каждая
форма будет иметь кнопку
отправки, текст /
пароль входа:
index.html
<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. Только одна из этих форм будет видна постоянно.
Другие будут выявлены во время покадровой анимации. Каждая форма имеет flipLink
якорь. Нажатие на эту кнопку переключения в свою очередь вызывают CSS3 анимацию.
JQuery код
Первым важным шагом будет определение, поддерживает ли
текущий браузер CSS3 3D-преобразования. Мы также будем использовать JQuery для фиксирования
нажатий на кнопку якоря.
Вот код, который все это будет делать:
script.js
$(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 backend, 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;
}
});
Теперь мы можем перейти к части CSS.
CSS
CSS будет обрабатывать все от представления формы и формы
элементов, до анимационных эффектов и
переходов. Мы начнем со стилей форм контейнера.
styles.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;
/* 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('../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;
/* 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 10px #008aff;}
100%{ box-shadow:0 0 1px #008aff;}
}
Теперь давайте посмотрим, что происходит, когда мы нажали на
ссылку, и перевернули форму классы добавляется в # formContainer :
#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);
}
Готово!
СМОТРЕТЬ ДЕМО СКАЧАТЬ
ИСХОДНИК
Ссылка на источник
| 
