HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

}

Кроме абсолютного позиционирования .flipper-object в левом верхнем углу его ближайшего родительского элемента с относительным позиционированием (что является позицией по умолчанию для абсолютно позиционированных элементов), у нас имеется установка перехода для преобразования. В данном случае ключевым объявлением, касающимся 3D-эффекта, является transform-style: preserve-3d. Тем самым браузеру сообщается, что при преобразовании этого элемента мы хотим, чтобы 3D-эффект сохранялся для всех дочерних элементов.

Если для .flipper-object не указать preserve-3d, обратную сторону (красную часть) переворачиваемого элемента мы никогда не увидим. Спецификацию для этого свойства можно найти по адресу http://www.w3.org/TR/2009/WD-css3-3d-transforms-200 90320/.

Каждая панель переворачиваемого элемента должна получить позиционирование в верхней части своего контейнера, но мы также хотим, чтобы при вращении обратная сторона элемента была не видна (в противном случае мы никогда не увидим зеленую панель, поскольку она располагается «позади» красной). Для этого используется свойство backface-visibility. Его значение устанавливается в hidden, чтобы, как вы догадались, скрыть обратную сторону элемента:

.panel {

    top: 0;

    position: absolute;

    backface-visibility: hidden;

}

совет

Обнаружилось, что в некоторых браузерах у свойства backface-visibility имеется ряд не­ожиданных побочных эффектов. Особенно полезно будет повысить эффективность работы элементов с фиксированной позицией на не самых новых Android-устройствах. Более по­дробные сведения и описание причин происходящего можно найти в публикациях по адресам http://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/ и http://benfrain.com/improving-css-performance-fixed-position-elements/.

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

.flipper-vertical .back {

    transform: rotateX(180deg);

}

.flipper-horizontal .back {

    transform: rotateY(180deg);

}

Теперь все на своих местах и все, что мы хотим сделать, — это перевернуть весь внутренний элемент, когда на внешний элемент наводится указатель мыши:

.flipper:hover .flipper-vertical {

    transform: rotateX(180deg);

}

.flipper:hover .flipper-horizontal {

    transform: rotateY(180deg);

}

Как вы можете представить, существует несметное количество (кстати, это преувеличение, я проверял) способов применения главных компонентов этой конструкции. Чтобы поинтересоваться с точки зрения перспективы, как выглядит забавный навигационный эффект или меню, которое оказывается за пределами основного холста, я рекомендую посетить сайт Codrops: http://tympanus.net/Development/PerspectivePageViewNavigation/index.html.

совет

Самые последние наработки консорциума W3C в отношении CSS Transforms Module Level 1 можно найти по адресу http://dev.w3.org/csswg/css-transforms/.

Свойство transform3d

Вдобавок к использованию перспективы я выявил немалую пользу от применения значения transform3d. Только одно это свойство и его значение позволяют перемещать элемент по осям X (влево-вправо), Y (вверх-вниз) и Z (вперед-назад). Внесем коррективы в последний пример и воспользуемся преобразованием translate3d. Код этого примера можно найти в файле каталога example_08-06.

Кроме установки элементов с небольшим отступом, изменения по сравнению с предыдущим примером можно найти только здесь:

.flipper:hover .flipper-vertical {

    transform: rotateX(180deg) translate3d(0, 0, -120px);

    animation: pulse 1s 1s infinite alternate both;

}

.flipper:hover .flipper-horizontal {

    transform: rotateY(180deg) translate3d(0, 0, 120px);

    animation: pulse 1s 1s infinite alternate both;

}

Мы по-прежнему применяем преобразование, но на этот раз добавили к вращению translate3d. Синтаксис включает в себя помещаемые внутрь объявления translate3d аргументы, отделенные друг от друга запятыми и задающие перемещение по осям X, Y и Z.

В наших двух примерах я не перемещал элемент по осям X или Y (слева направо или вверх и вниз), зато с вашей точки наблюдения перемещал его по на правлениям к вам и от вас.

Если вы посмотрите на верхний пример, то увидите, что переворот элемента происходит за нижней кнопкой и завершается в позиции, находящейся на 120 пикселов ближе к плоскости экрана (отрицательные значения приведут к отдалению элемента от вас).

В то же время нижняя кнопка переворачивается по горизонтали и в итоге оказывается отстоящей от вас на 120 пикселов.

совет

Спецификацию, касающуюся translate3d, можно найти по адресу http://www.w3.org/TR/css3-3d-transforms/.

Использование преобразований при постепенном усложнении

Область, в которой, на мой взгляд, свойство transform3d проявило себя с наилучшей стороны, — это выдвигаемые на экран и задвигаемые за его пределы панели, в частности модели, располагающие элементы навигации за пределами холста. Если вы откроете файл, находящийся в каталоге example_08-07, то увидите, что мною создана основная постепенно усложняемая модель за пределами холста.

При создании системы взаимодействия с помощью JavaScript и с использованием современных свойств CSS, подобных преобразованиям, появляется смысл испытывать компоненты, начиная с требующих поддержки устройств с самыми скромными возможностями. А что делать в расчете на тех, у кого нет JavaScript (да, попадаются еще и такие), или на тех, кто испытывает проблемы с загрузкой или выполнением кода JavaScript? А что делать, если чьи-нибудь устройства не поддерживают преобразования (устройства, использующие, к примеру, Opera Mini)? Не волнуйтесь, вы можете без особых усилий обеспечить работоспособный интерфейс для любой возможности.

Я пришел к выводу, что при создании таких моделей интерфейсов полезнее всего начинать с самого скромного набора возможностей и выполнять усложнение, начиная с этой исходной позиции. Сначала установим, что увидят те, у кого недоступен JavaScript. Как бы там ни было, если метод для отображения меню зависит от наличия JavaScript, то вывод меню за пределы экрана не используется. В таком случае для размещения области навигации в обычном потоке элементов документа мы полагаемся на разметку. В худшем случае независимо от ширины окна просмотра пользователи смогут просто прокрутить страницу, добравшись до самого низа, и щелкнуть на ссылке.

Если JavaScript доступен, то при меньших экранах мы убираем меню влево. При щелчке на кнопке меню мы добавляем класс к тегу body (с помощью JavaScript) и используем его в качестве зацепки для возвращения навигационной панели в поле зрения с помощью CSS.

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

Затем эффект скрытия-показа панели навигации постепенно усложняется. Здесь свое вполне заслуженное место занимает средство Modernizr: добавляя классы к HTML-тегу, мы можем использовать их как зацепки для стилевого оформления (Modernizr более подробно рассматривается в главе 5).

Сначала для браузеров, поддерживающих только преобразования, связанные с перемещениями (например, старые Android-браузеры), используется простое свойство translateX:

.js .csstransforms .navigation-menu {

    left: auto;

    transform: translateX(-200px);

}

Для браузеров, поддерживающих трехмерные преобразования, используется свойство translate3d. При этом там, где оно поддерживается, ожидается существенный прирост производительности, поскольку на большинстве устройств выполнение решаемых при его объявлении задач возлагается на графические процессоры:

.js .csstransforms3d .navigation-menu {

    left: auto;

    transform: translate3d(-200px, 0, 0);

}

Использование подхода с постепенным усложнением гарантирует положительное восприятие работоспособности ваших конструкций со стороны самой широкой аудитории. Помните о том, что ваши пользователи не нуждаются в визуальном равенстве, но могут оценить соответствие возможностям.

Создание эффектов анимации средствами CSS3

Если вам приходилось работать с приложениями Flash, Final Cut Pro или After Effects, то вы сразу же почувствуете преимущества, получаемые при работе с CSS3-анимацией. В CSS3 применяется методика анимации с использованием ключевых кадров, встречающаяся в приложениях, построенных на использовании шкалы времени.

Анимация весьма широкой реализуется в браузерах и поддерживается Fire­fox 5+, Chrome, Safari 4+, Android (всеми версиями), iOS (всеми версиями) и Internet Explorer 10+. Анимация в CSS3 содержит два компонента: прежде всего это объявление ключевых кадров, а затем их использование в свойстве animation. Посмотрим, как все это работает.

В предыдущем примере создавался простой эффект переворачивания элементов путем сочетания преобразований и переходов. Давайте соберем воедино все технологии, изученные в этой главе, и добавим к этому примеру анимацию. В следующем примере, код которого можно найти в файле каталога example_08-05, добавим анимационный эффект пульсации в процессе переворачивания элемента.