3D и CSS

Paul Kinlan

Введение

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

Обычно 3D в основном используется в качестве устройства для игр или некоторых продвинутых пользовательских интерфейсов. Лишь с появлением преобразований перспективы в WPF и Silverlight подходящая модель применения 3D-эффектов к элементам пользовательского интерфейса стала практическим решением для разработчиков приложений (в конце концов, 3D — это не совсем просто).

Модель CSS 3D-преобразования была представлена ​​в виде черновика спецификации в марте 2009 года, чтобы позволить веб-разработчикам создавать интересные и привлекательные пользовательские интерфейсы, использующие преимущества 3D, позволяя авторам приложений применять преобразования 3D-перспективы к любому визуальному элементу DOM.

Рабочий проект CSS 3D-преобразования является логическим расширением модели CSS 2D-преобразования , в котором представлены некоторые дополнительные свойства, в том числе: перспективы, повороты и преобразования в трехмерном пространстве.

Никогда раньше мы не могли так легко создавать 3D-интерфейсы. Эти технологии снизили входной барьер. Вам больше не нужно быть математическим гением, чтобы создавать трехмерные элементы.

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

Поддержка браузера и аппаратное ускорение

-webkit-перспектива

Поддержка браузера

• 36
• 12
• 16
• 9

Источник

-webkit-transform-3d

Поддержка браузера

• 2
• 12
• 49
• 4

Источник

Важная информация, которую следует запомнить, заключается в том, что, хотя браузер может «поддерживать» 3D, он может не иметь возможности отображать 3D из-за ограничений оборудования и драйверов. 3D-сцены, основанные на DOM, могут быть очень затратными в вычислительном отношении, и поэтому производители браузеров решили, что вместо того, чтобы замедлять работу браузеров с помощью чисто программного решения для рендеринга, они вместо этого будут использовать преимущества графического процессора, который может быть доступен не на всех платформах.

Обнаружение функций

А как насчет обнаружения функций? Я надеялся, что ты не спросишь! Разработчики используют такие инструменты, как Modernizr, для обнаружения поддержки определенных функций и возможностей браузера. Хотя можно обнаружить наличие поддержки 3D-преобразований, невозможно обнаружить наличие аппаратного ускорения, а аппаратное ускорение является ключевым компонентом.

Базовый образец

Нет ничего лучше, чем прыгнуть прямо. В этом примере мы применим базовый набор вращений произвольного элемента DOM.

Мы начинаем с определения перспективы корневого элемента.

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">

Перспектива важна, поскольку она определяет, как визуализируется глубина 3D-сцены: значения от 1 до 1000 будут давать очень выраженный эффект, а значения более 1000 — меньше. Затем мы добавляем iframe и применяем поворот на 30 градусов вокруг осей Z и Y.

<iframe
    src="http://www.html5rocks.com/"
    style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>

БАМ! То есть, элемент полностью интерактивный и по всем параметрам является полноценным DOM-элементом (разве что он теперь выглядит ещё круче). Если ваш браузер не поддерживает 3D-преобразования, ничего не произойдет. Вы просто увидите простой iframe без вращения. Если ваш браузер поддерживает 3D-преобразования, но без аппаратного ускорения, это может выглядеть немного странно.

Анимация

Что мне нравится в 3D-преобразованиях CSS3, так это то, что они прекрасно сочетаются с модулем CSS Transition. Анимации и переходы легко определить в CSS, и их применение в 3D не является исключением.

Анимировать элементы, к которым применена трехмерная перспектива, легко. Просто установите стиль «перехода» на «трансформацию», прикрепите продолжительность и функцию анимации. С этого момента любое изменение стиля «трансформации» будет анимироваться.

Мы переработали предыдущие примеры, чтобы использовать стили документа, а не встроенные стили. Это не только проясняет пример, но и позволяет использовать псевдоселектор :hover . Используя селектор :hover , переходы можно инициировать, просто наведя указатель мыши на элемент. Потрясающий!

Краткое содержание

Это был всего лишь краткий обзор некоторых интересных эффектов, которые можно применить к любому видимому элементу DOM с помощью 3D-преобразований CSS. Есть еще много вещей, которые можно сделать, но которые не были рассмотрены в этом уроке.