3D-трансформации в CSS
С помощью 3D-трансформаций, появившихся в спецификации CSS3, есть возможность управлять поведением объекта по оси Z. Если говорить буквально, то данная ось расположена перпендикулярно экрану, т. е. по сути она смотрит зрителю в лицо.
Функции 3D-трансформации являются расширенными функциями двухмерных трансформаций, в которые добавлен параметр для оси Z. Этими функциями являются, например, translate3d(), rotate3d(), scale3d(), а также одиночные записи, такие как translateZ(), rotateZ(), scaleZ().
Функция perspective()
Кроме всего прочего, в CSS3 была добавлена еще одна функция — perspective(), которая может быть использована для создания эффекта перспективы, глубины в сцене. Перемещая элемент по оси Z с установленной перспективой, можно наблюдать, как он приближается или отдаляется от зрителя.
Итак, данная функция задает расстояние между плоскостью экрана и точкой сходимости линий. Масштабирование элемента пропорционально d/(d – Z), где d (значение перспективы) — это расстояние от графической плоскости до предполагаемого положения глаз зрителя:
На схеме показано, как масштабирование зависит от перспективы и значения Z. На верхнем рисунке Z составляет половину d. Для того, чтобы создать впечатление, что исходный круг (который нарисован сплошным контуром) стал ближе к зрителю (круг, нарисованный пунктиром), круг увеличивается в два раза (результат показан в качестве голубого круга). На нижнем рисунке круг уменьшен на одну треть, чтобы создать впечатление, что он отдалился от исходного положения и зрителя.
Без указания перспективы все точки в Z-пространстве сплюснуты в 2D-плоскости, и восприятие глубины будет отсутствовать как таковое. Для некоторых трансформаций, таких как перемещение (translate) по оси Z, функция перспективы играет важную роль, поскольку делает возможным передать визуальный эффект 3D-трансформации.
Ниже показаны примеры того, как выглядят элементы с перспективой и без:
Perspective-origin — точка отсчета
Для перспективы можно изменить точку отсчета при помощи свойства perspective-origin. Оно словно задает точку расположения зрителя при взгляде на перспективу. По умолчанию эта точка находится в центре элемента, но можно определить координаты точки по осям X и Y, из которой наблюдатель будет смотреть на дочерние элементы:
Обратная сторона элемента: backface-visibility
Когда элемент вращается в 3D-пространстве вокруг горизонтальной или вертикальной оси, его обратная сторона по умолчанию видна (visible). При этом содержимое элемента с другой стороны отображается зеркально:
На примере выше правый квадрат повернут по оси Y на 180 градусов. Свойство backface-visibility со значением visible не скрывает содержимое блока, и оно отображается зеркально.
Но если установить для свойства backface-visibility значение hidden, то содержимое элемента будет скрыто с его обратной стороны (включая фон блока). По сути, объект будет невидим на экране, пока он повернут обратной стороной к зрителю.
Но эта возможность может пригодиться, если вам необходимо создать впечатление, что у объекта имеется две стороны. На примере ниже показано, как можно создать игральную карту, используя два фоновых изображения и свойство backface-visibility: hidden. Повернув карту по оси Y на угол более 90 градусов, можно увидеть, как карта развернулась «рубашкой» к зрителю, а лицо карты при этом скрылось:
(кликните по картинке, чтобы увидеть код)
Таковы особенности работы с 3D-пространством в CSS3. Рекомендуем самостоятельно попрактиковаться для лучшего понимания поведения трехмерных элементов. Также не забывайте про префиксы производителей — в реальном проекте их использование обязательно.
В следующем уроке вы узнаете, как заставить объекты плавно переходить от одного состояния к другому. Для этого мы изучим CSS3-свойство transition и все его значения.
