—»     —»   Дизайн пользовательских интерфейсов: воссоздаем крутой эффект переворота из OS X при помощи CSS3 3D Rotation
  Раздел: Руководства   Нет комментариев  

Дизайн пользовательских интерфейсов: воссоздаем крутой эффект переворота из OS X при помощи CSS3 3D Rotation



В спецификации CSS3 доступны два типа трансформаций: 2D и 3D. В нашей предыдущей статье мы обсуждали двухмерные трансформации, реализованные посредством CSS3. Так что на этот раз мы хотим рассказать вам о 3D-пространстве, и конкретно для сегодняшней статьи мы выбрали эффект переворота из OS X.

Дизайн пользовательских интерфейсов: воссоздаем крутой эффект переворота из OS X при помощи CSS3 3D Rotation

Кликните ссылку ниже, чтобы увидеть результат в действии.

* Посмотреть демо

Синтаксис 3D Rotation

Вращение в трехмерном пространстве, в принципе, схоже с вращением в 2D. Чтобы вращать элемент в вертикальном направлении, мы можем использовать следующий код:

-webkit-transform: rotateX(Ndeg);  
-moz-transform: rotateX(Ndeg);
transform: rotateX(Ndeg);

У нас также есть возможность вращать элемент горизонтально подобным образом.

-webkit-transform: rotateY(Ndeg);  
-moz-transform: rotateY(Ndeg);
transform: rotateY(Ndeg);

Есть множество отличных ресурсов, которые вы можете изучить, чтобы лучше вникнуть в суть CSS3 3D Transform. Ниже вы можете видеть рекомендации от нас.

* Введение в CSS3 3D Transform – 24 Ways
* Браузерная поддержка CSS3 Transform – CanIUse.com
* Приключения в трехмерном пространстве: CSS 3D Transforms – SmashingMagazine

Эффект переворота из OS X

Как мы уже отметили ранее, мы собираемся применить CSS3 Transform для создания эффекта переворота, который можно встретить в OSX или iOS. Если вы используете данные ОС, то наверняка уже знакомы с этими эффектами. В OSX вы можете встретить эти эффекты в гаджете консоли.

Дизайн пользовательских интерфейсов: воссоздаем крутой эффект переворота из OS X при помощи CSS3 3D Rotation

Раньше такой эффект достигался при помощи только лишь javascript-библиотек. Но сегодня мы можем упростить процесс, и применить технологию CSS3 Transform.

Ресурсы

На этот раз нам понадобится только jQuery и этот PSD iOS Passbook с Dribbble, который мы будем использовать в качестве графического интерфейса. У нас есть возможность внести некоторые изменения при помощи Photoshop.

Затем, возьмите один из графических элементов Passbook и сохраните его в два файла: лицевая и задняя стороны. В данном случае мы выбрали Starbuck Passbook.

Дизайн пользовательских интерфейсов: воссоздаем крутой эффект переворота из OS X при помощи CSS3 3D Rotation

HTML-код

Затем, давайте создадим новый простой HTML-документ, и поместим следующую разметку в 'body'.

<section class="passbook">
<div class="card front">
<img src="img/starbuck-front.png">
<a href="#" class="info flip">i</a>
</div>
<div class="card back">
<ul class="nav">
<li class="title">Starbuck Coffee</li>
<li class="button done"><a class="flip" href="#">Done</a></li>
</ul>
<img src="img/starbuck-back.png">
</div>
</section>

Как можно видеть выше, мы поместили лицевую и заднюю стороны в разные div-элементы. На лицевой стороне у нас есть ссылка, которая будет переворачивать Passbook при нажатии. На задней стороне у нас тоже будет ссылка, которая позволит вернуть все на свои места.

CSS-код

Предположим, что вы уже создали новый CSS-файл. В этом файле каскадных таблиц стилей нам нужно сначала указать габариты Passbook, и выставить стиль трансформации на preserve-3d – таким образом, дочерние элементы также будут трансформироваться в трехмерном пространстве. Мы также добавили эффект перехода, чтобы переворот был более плавным.

.passbook {
position: relative;
width: 300px;
height: 380px;
margin-bottom: 100px;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;

-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;

margin-left: 85px;
}

Затем мы выставили положение карточки на абсолютное, чтобы каждая карточка располагалась поверх предыдущей. Нам также нужно скрыть заднюю сторону при помощи параметра backface-visibility.

.card { 
position: absolute;

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}

Лицевая сторона

Теперь нам нужно добавить декоративные стили для ссылки на лицевой стороне:

.front .info {
width: 18px;
height: 18px;
border-radius: 21px;
font-family: "Georgia", serif;
font-style: italic;
background-color: #075621;
color: #fff;
text-align: center;
position: absolute;
right: 10px;
bottom: 15px;
font-size: 11px;
line-height: 18px;
display: block;
text-decoration: none;
}

Также нужно расположить лицевую сторону поверх задней, указав более высокий параметр z-index:

.front {
z-index: 1;
}

Задняя сторона

Что касается задней стороны, то изначально мы ее переворачиваем.

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

Затем мы добавляем декоративные стили к навигации, которые включают в себя изменения цвета текста, добавление градации к кнопки ссылки, а также расположение кнопки в правильное место.

.back .nav {
padding: 0;
margin: 0;
color: #fff;
font-size: 12px;
width: 100%;
font-weight: bold;
}
.back .nav li {
display: inline;
position: absolute;
top: 18px;
}
.back .nav a {
font-weight: bold;
text-decoration: none;
padding: 7px 10px;
border: 1px solid #095d25;
border-radius: 5px;
color: #fff;

background: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);
}
.back .nav a:hover {
background: -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.55) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(100%,rgba(0,0,0,0.55)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);
}
.back .nav .title {
left: 105px;
}
.button.done {
right: 10px;
}

Наконец, мы добавляем класс flip к Passbook следующим образом:

.rotate-3d {  
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}

jQuery

jQuery-часть довольно простая. С самого начала, не забудьте ссылку на jQuery-библиотеку в головной секции вашего кода:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

Затем нам нужно использовать функцию toggleClass из jQuery, чтобы применить класс .rotate-3d, который мы ранее добавили в каскадные таблицы стилей.

<script type="text/javascript">
$(document).ready(function(){
$('a.flip').click(function(event){
$('.passbook').toggleClass('rotate-3d');
event.preventDefault();
});
});
</script>

И это весь код, который нам был нужен. Все довольно понятно, и гораздо проще, чем с использованием javascript. Как обычно, вы можете ознакомиться с демо, и скачать исходные коды примера.

Посмотреть демо | Скачать исходные коды
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: интерфейс, CSS, 3D
Опубликовал Design FactoRy   Прочитано (раз): 5517   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930