3D форма авторизации для сайта на CSS3

Зарегистрированные пользователи весьма ценятся администратором сайта. Ведь это постоянные жители ресурса которые наделены определенными привилегиями. Но для того чтобы войти на сайт нужна форма авторизации. Обыденная форма отталкивает пользователя, ведь в ней нет ничего интересного, и зачастую пользователи не обращают на нее внимание, что приводит к потере посетителей. Но как совместить элегантную форму авторизации и восстановления пароля в единое, для этого нам понадобятся простые трансформации css.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

У нас будет две формы – авторизация и восстановление пароля – но в конкретном случае будет видна лишь одна из них. Кликнув по ссылке (по полоске в примере), мы запустим CSS3-вращение по оси Y, что откроет нам доступ к другой форме посредством переворота.

Мы будем использовать jQuery для слежения за кликами по ссылкам, а также для добавления или удаления имени класса на элементе контейнера для форм. С помощью CSS мы будем применять трансформацию rotate (горизонтальное вращение) к обеим формам, но разница будет заключаться в 180 градусах угла, в зависимости от класса. Это позволит нам отображать формы на противоположных сторонах воображаемой платформы. Для того чтобы анимировать переход, мы будем использовать параметр CSS transition.

Шаг 1. HTML

На понадобятся 2 формы – авторизация и восстановление. У каждой формы будет кнопка подтверждения, а также поля для ввода текста/пароля:

<a href="#" id="flipToRecover">Forgot?</a>

</form>

<a href="#" id="flipToLogin">Forgot?</a>

</form>

</div>

Обратите внимание на ID элементов в форме. Мы будем широко использовать их в первой части CSS-кода. Лишь одна из форм будет видна на данный момент. Другая будет открываться в процессе анимации переворота. У каждой формы будет анкор flipLink. Клик по данному анкору будет переключать (добавлять или удалять) имя класса flipped к div’у #formContainer, что впоследствии запустит анимацию на CSS3.

Шаг 2. CSS

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;

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

-moz-animation: pulse 2s infinite;

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

}

Параметр видимости backface важен, так как он сообщает браузеру о необходимости скрыть всю обратную сторону форм. В противном случае, у нас получится зеркальная версия формы восстановления вместо отображения лишь формы авторизации. Эффект переворота достигается за счет применения трансформации rotateY(180deg). Она вращает элемент справа налево. Так как мы указали параметр перехода, каждое вращение будет плавно анимировано.

Обратите внимание на объявление keyframe в самом низу раздела с формой. Оно определяет повторение анимации, которое не зависит от взаимодействия с пользователем. CSS-описание анимации дано ниже:

/* 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:

#formContainer.flipped #login{

opacity:0;

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

}

Класс flipped приводит к вращению div’ов #login и #recover на 180 градусов. Это позволяет нам спрятать форму #login. Но, так как форма #recover уже встречалась нам с обратной стороны, она становится видимой вместо того, чтобы быть невидимой.

Шаг 3. jQuery

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