3D и CSS

Paul Kinlan

Введение

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

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

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

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

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

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

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

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

-webkit-преобразование-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-преобразования, но без аппаратного ускорения, это может выглядеть немного странно.

Анимация

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

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

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

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

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