Введение в 3D преобразования c CSS

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

Рендеринг 3D-графики в Интернете существует уже много лет. Сначала была Flash. Затем WebGL. Дополненная реальность и WebVR не за горами. В то время как эти решения превосходно подходят для создания исследуемых 3D-сред, они могут быть излишними для основного материала Интернета: интерфейсов. С помощью 3D-преобразований CSS разработчики переднего плана могут улучшить свой дизайн, добавив новое измерение к традиционным веб-сайтам.

Обоснование

Прежде чем мы погрузимся в 3D, вспомним, как данная функция используется на практике.

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

Возьмем, к примеру, приложение Weather для ранней iOS. Приложение использовало два представления: представление сведений и представление параметров. Переключение между этими двумя видами было выполнено с помощью 3D-флип-перехода. Это позволяло пользователю видеть, что интерфейс имеет два и только два вида, по одному с каждой стороны панели.

Текущая Среда Поддержки

Модуль CSS 3D transforms был впервые представлен в 2009 году. Он был написан членами Apple и впервые был поддержан Safari. С тех пор все современные браузеры, включая Chrome, Firefox, Internet Explorer и Edge, добавили поддержку.

По состоянию на 2018 год свойства CSS преобразования без префиксов поддерживаются 98% используемых браузеров. Добавление -webkit-transform захватит старые браузеры, чтобы достичь 99%.

Есть одно предостережение. Internet Explorer 11 не поддерживает transform-style: preserve-3d. Это означает, что IE11 все еще может использовать 3D-преобразования с отдельными элементами, но не может обрабатывать вложенные элементы для построения объектов, описанных здесь.

Заключение

Таким образом, 3D-преобразования могут быть чем-то большим, чем просто красивым дополнением. Мы можем использовать их для решения реальных задач интерфейса и сделать наши приложения интуитивно более понятными.