Введение
Долгое время 3D было прерогативой настольных приложений. Недавно, с появлением современных смартфонов, имеющих доступ к встроенному ускорению графического процессора, мы начали видеть, что 3D используется практически повсюду.
Обычно 3D в основном используется в качестве устройства для игр или некоторых продвинутых пользовательских интерфейсов. Лишь с появлением преобразований перспективы в WPF и Silverlight подходящая модель применения 3D-эффектов к элементам пользовательского интерфейса стала практическим решением для разработчиков приложений (в конце концов, 3D — это не совсем просто).
Модель CSS 3D-преобразования была представлена как проект спецификации в марте 2009 года, чтобы позволить веб-разработчикам создавать интересные и привлекательные пользовательские интерфейсы, использующие преимущества 3D, позволяя авторам приложений применять преобразования 3D-перспективы к любому визуальному элементу DOM.
Рабочий проект CSS 3D-преобразования является логическим расширением модели CSS 2D-преобразования , в котором представлены некоторые дополнительные свойства, в том числе: перспективы, повороты и преобразования в трехмерном пространстве.
Никогда раньше мы не могли так легко создавать 3D-интерфейсы. Эти технологии снизили входной барьер. Вам больше не нужно быть математическим гением, чтобы создавать трехмерные элементы.
Следует отметить, что модуль CSS 3D предназначен для того, чтобы помочь разработчикам создавать насыщенные и визуально интересные приложения, а не для того, чтобы вы могли создавать захватывающие трехмерные миры.
Поддержка браузера и аппаратное ускорение
-webkit-перспектива
-webkit-transform-3d
Важная информация, которую следует помнить, заключается в том, что, хотя браузер может «поддерживать» 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. Есть еще много вещей, которые можно сделать, но которые не были рассмотрены в этом уроке.