Введение в 3d
С появлением CSS-преобразований элементы на веб-странице стали гораздо более гибкими: их можно было перемещать, вращать, наклонять, сжимать и растягивать. Это дало веб-дизайнерам возможность наконец-то приблизиться к уровню печатных дизайнеров. А с введением CSS 3D-преобразований они смогли не только догнать, но и обогнать своих печатных коллег, открывая новые горизонты в графическом дизайне.
3D-графика на вебе существует уже несколько лет. Сначала был Flash, затем появились <canvas>, WebGL и библиотеки, такие как Three.js. Сейчас на горизонте маячит WebVR и дополненная реальность. Все эти технологии великолепно справляются с созданием полноценных 3D-микромиров, которые можно исследовать, но для типичных задач на вебе они порой избыточны. В то время как CSS 3D-преобразования позволяют фронтенд-разработчикам легко добавить третье измерения в традиционные веб-интерфейсы, не утопая в сложности.
Обоснование
Прежде чем погрузиться в третье измерение, нам стоит задать себе вопрос: как пользователи выиграют от этой функции?
Будем честными. CSS был создан для стилизации документов. Со временем он стал использоваться для стилизации приложений. Но, увы, CSS не идеален для 3D-моделирования. Вместо этого 3D-преобразования следует рассматривать так же, как и другие современные возможности CSS — такие как медиазапросы, градиенты и анимации — как дополнения. 3D для сайтов работает лучше всего, когда оно дополняет интерфейс, а не заменяет его. Есть множество способов использовать 3D-преобразования внутри интерфейса, через анимации и переходы.
Возьмём, к примеру, приложение «Погода» для ранних версий iOS. Оно использовало два вида: вид с подробностями и вид с настройками. Переключение между этими видами происходило с использованием 3D-переворота. Это давало пользователю понять, что интерфейс имеет два и только два представления, каждое из которых находится на одной из сторон панели.
Ещё один пример — плагины каруселей. Как показать, что слайды обвивают друг друга и циклично повторяются? С помощью 3D слайды можно расположить рядом друг с другом в круге в 3D-пространстве. В таком расположении цикличность карусели становится очевидной.
3D-преобразования могут быть не только «конфетками для глаз». Мы можем использовать их для решения реальных задач интерфейса, делая наши приложения более интуитивно понятными.
Текущая поддержка
Модуль CSS 3D-преобразований был впервые представлен в 2009 году. Его разработали участники из Apple, и первым, кто его поддержал, стал Safari. С тех пор все современные браузеры, включая Chrome, Firefox, Internet Explorer и Edge, добавили поддержку. Для того чтобы проверить актуальную информацию о поддержке, загляните в таблицу на caniuse.com/#feat=transforms3d.
На 2024 год, безпрефиксные свойства transform поддерживаются 98% браузеров.
Есть одно небольшое исключение. Internet Explorer 11 не поддерживает transform-style: preserve-3d (об этом свойстве мы поговорим позже). Это значит, что IE11 может использовать 3D-преобразования для отдельных элементов, но не может обрабатывать вложенные элементы для создания сложных объектов, которые рассматриваются в этом эссе.
Ну что, давайте кодить.