Веб, теперь в 3D: Практика

Андрей Ситник, Злые марсиане

Веб, теперь в 3D: Практика

Андрей «A.I.» Ситник

sitnik.ru @andrey_sitnik
Злые марсиане

Поддержка 3D-трансформаций

12
10
10
3.2
3.0
12?

3D уже здесь

Часть 1. Зачем?

3D-интерфейс по мнению 90-х

3D-веб по мнению 2000-х

Metro: Windows Phone и Windows 8

Прогибание иконки при нажатии

Android 4

«Дальше листать некуда»

Зачем верстальщику думать о дизайне?

Верстальщик — это переводчик

Дизайнер
Верстальщик
Программист

Верстальщик — тоже дизайнер

Дизайн — это передача информации и эмоций

Анимация

Анимация не только красива, но и полезна

Пример — книга

Анимация открывающейся обложки создаёт ощущение книги или дневника.

insomnis.ru

Пример — уголок

Загибающийся уголок с исходным кодом под ним — очевидная метафора ссылки на исходный код страницы

easings.net

Пример — переворот

Переворот — отличная анимация для смены одного объекта на другой. Вспомните сказки — «обратилась в птицу».

groupon.ru/gift_cards

Пример — альбом

Можно обыграть аллюзию на настоящую обложку альбома со списком песен на другой стороне

dachip.com/download.html

Часть 2. Теория

CSS Transforms

-o-transform: команда команда …; -ms-transform: команда команда …; -moz-transform: команда команда …; -webkit-transform: команда команда …;
transform: команда команда …;

CSS 2D Transforms

transform: rotate(45deg)
transform: translateX(60px)
transform: skewY(20px)
transform: scale(0.5)

CSS 3D Transforms

Новые команды для работы в трёхмерном пространстве:

Вращение

transform: rotateX(45deg)
transform: rotateY(45deg)
transform: rotate3d(2, 3, 1, 30deg)
x
y
z
60deg
90deg
30deg
=
=
=

Перемещение

transform: translateZ(50px)
transform: translateX(50%)

Видимость обратной стороны

backface-visibility: visible
backface-visibility: hidden

Центр трансформации

transform-origin: 50% 50% 0
x
y
z
transform-origin: 100% 50% 0

Перспектива

perspective: 2000px
        transform: rotateY(45deg)
perspective: 200px
        transform: rotateY(45deg)

Положение перспективы

perspective-origin: 50% 50%

Статус потомков

Нужно выставить tranform-style: preserve-3d если потомки, тоже будут иметь 3D-преобразования (по-умолчанию, flat)

Часть 3. Практика

Скачать как учебник

Повторите шаги практики дома на своих проектах.

evl.ms/rit3d

QR-код со ссылкой на загрузку

Задача

При наведении перевернуть фотографию и показать оборот

HAL 9000 любит всех

Шаг 1. Определяем поддержку 3D

Поддержка 3D зависит не только от браузера, но и от видеокарты → используйте Modernizr

.csstransforms3d .task { … }
if ( Modernizr.csstransforms3d ) { … }

Шаг 2. Боремся с префиксами. Sass и Compass

.task
        +rotateY(180deg)
        +transition(all 1s)
.task {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -ms-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;

Шаг 3. Устанавливаем состояния

.task .hal9000, .task .love
        +backface-visibility(hidden)
      .task .love
        +rotateY(180deg)
      .task:hover .hal9000
        +rotateY(-180deg)
      .task:hover .love
        +rotateY(0)
HAL 9000 любит всех

jQuery и 3D-анимация

Устанавливаем расширение TransformJS:

hal9000.animate({ rotateY: 0 }, 600);

Почему CSS Transitions лучше для анимаций

Шаг 4. Добавляем анимации

.task .hal9000, .task .love
        +transition(all 1s linear)
HAL 9000 любит всех

Шаг 5. Свет

.task .love, .task:hover .hal9000
        background-color: #ccc
      .task:hover .love, .task .hal9000
        background-color: white

Шаг 6. Easing-функция

  1. Выбираем нужный ход анимации на easings.net или cubic-bezier.com
  2. Ставим расширение Compass Ceaser или прописываем ход анимации через кривую Безье
  3. Обновляем transition-свойство: +transition(all 1s ceaser('easeInOutBack'))

Сравниваем улучшения

Без улучшений

Со светом и easing

HAL 9000 любит всех
HAL 9000 любит всех

Шаг 7. Старые браузеры

.no-csstransforms3d .task .love
        display: none
      .no-csstransforms3d .hal9000
        display: none
      .no-csstransforms3d .love
        display: block

Часть 4. Будущее

WebGL

WebGL — передача низкоуровневых OpenGL-комманд видеокарте напрямую из JavaScript. Как <canvas> для 3D.

WebGL: игры, 360°-обзоров товаров, трёхмерные графики.

CSS 3D Transforms: анимации, эффекты с обычной страницей.

Примеры WebGL

Шейдеры из CSS-фильтров

Можно будет указывать, как изгибать любой блок

Пример шейдеров

Обычный HTML-блок Google Maps и немного шейдеров:

WebCL

На некоторых задачах видеокарта в несколько сот раз быстрее процессора.

WebCL позволяет производить такие вычисления на видеокарте из JavaScript.

Японцы ждут тебя в прекрасном мире 3D

Вопросы

evl.ms/rit3d