948 Вы в курсе, что с помощью CSS3 можно переворачивать элементы в 3D-пространстве? Думаю, что да, ведь такая возможность доступна уже целых два года!
Сначала эту технологию поддерживали браузеры только на основе движка Webkit – Safari и Chrome, но сейчас и Firefox присоединился к ним. Это значит, что больше половины пользователей (кроме тех, кто использует браузер IE) может увидеть современные анимационные эффекты на основе CSS.
В этом уроке мы увидим, как можно использовать эти трансформации для создания интересных эффектов. В качестве примера мы будем переворачивать Apple-подобную форму авторизации.
Задумка
У нас будет две формы – одна для авторизации, а вторая для восстановления пароля. Только одна из форм будет видна глазу. Нажав на ссылку (в примере – это ленточки), мы запустим CSS3-функцию вращения элемента по оси Y. С помощью этой функции появится другая форма с эффектом переворота.
Мы будем использовать jQuery для слежения за кликами по ссылкам и добавления/удаления класса контейнеру формы. С помощью CSS мы будем применять функцию rotateY (горизонтальное вращение) для обеих форм, но с разницей в 180deg в зависимости от класса. Благодаря этому мы сможем достигнуть эффекта, как будто формы находятся на разных сторонах плоскости. Чтобы анимировать переход от одной формы к другой воспользуемся свойством CSS transition.
Разметка
Нам понадобится две формы – login и recover. Каждая форма будет иметь кнопку для отправки и поля для ввода типа text/password:
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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. Нажав на них, блоку #formContainer будет добавлен или удалён класс flipped. Это в свою очередь запустит CSS3-анимацию.
jQuery-код
Во-первых надо определить, поддерживает ли браузер CCS3 3D-преобразования. Если поддержки нет, то красивая анимация будет недоступна. Также jQuery будет использоваться для слежения за кликами по ссылкам с классом flipLink. Так как мы не будем делать полноценное серверное приложение, то нужно предотвратить возможность отправки форм.
Вот код, который делает всё описанное выше:
assets/js/script.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
$(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; } }); |
Для удобства функционал, который проверяет браузер на поддержку CCS3 3D, вынесен в отдельную вспомогательную функцию. Она проверяет поддержку свойства perspective, которое придаёт объём форме.
Теперь мы можем перейти к разделу с CSS.
CSS-код
Код CSS будет управлять всем, начиная от внешнего вида форм и элементов внутри них, заканчивая анимационными эффектами. Мы начнём со стилей контейнера формы.
assets/css/styles.css
|
1 2 3 4 5 6 7 8 9 10 |
#formContainer{ width:288px; height:321px; margin:0 auto; position:relative; -moz-perspective: 800px; -webkit-perspective: 800px; perspective: 800px; } |
Мы установили width, height, margin, position, а также свойство perspective элементу. Это свойство придает объёма содержимому на странице. Без него анимационные эффекты будут выглядеть плоско (попробуйте отключить его, чтобы понять, о чём я говорю). Чем больше его значение, тем сильнее эффект.
Далее мы будем стилизировать сами формы.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
#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; /* Конфигурация анимации keyframe для 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); } |
Для начала опишем общие стили для обеих форм, после мы добавим уникальные стили для каждой формы отдельно.
Свойство backface visibility очень важно. Оно указывает браузеру, что если форма повёрнута к пользователю задней стороной, то её нужно скрыть. Иначе мы бы видели отражённую версию формы для авторизации вместо формы для восстановления пароля. Эффект переворота достигается с помощью функции rotateY(180deg). В этом случае элемент вращается справа налево. Т.к. мы установили свойство transition, то каждый поворот будет плавно анимирован.
Обратите внимание на объявление keyframe внизу секции формы. Он устанавливает повторяющуюся (объявленную с помощью ключевого слова infinite) keyframe animation, которая не зависит от действий пользователя. Ниже представлено описание CSS-анимации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
#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); } |
Появление класса flipped у блоков #login и #recover перевернёт их на 180 градусов. Если блок #login перевернётся и исчезнет, то #recover развернётся к нам лицевой стороной и будет видимым.
Установка свойства opacity нужна только для того, чтобы устранить баг в браузере Android, который игнорирует свойство backface-visibility и показывает зеркально отраженную версию формы вместо того, чтобы скрыть её. С этой поправкой анимация работает даже на Android и iOS в дополнение к десктопным браузерам.
Готово!
CSS 3D-преобразования открывают двери для разнообразных интересных эффектов, которые раньше реализовывались с помощью тяжеловесной технологии Flash. Теперь мы можем создавать легковесные, доступные для сканирования поисковыми роботами, семантически правильные сайты, которые отлично выглядят и без проблем работают в “отстающих” браузерах.
Недавно заказывал продвижение сайтов на www.krasdesign.ru/prodvizhenie, все очень понравилось, ребята знают свое дело.
