Основные виды 3D-трансформаций в CSS

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

Поначалу трехмерные трансформации могут показаться немного ошеломляющими, особенно если учесть, что HTML-холст (экран монитора) – это 2D-пространство. Но если вы представите себе, что ваш сайт имеет и глубину (вглубь экрана, или выступая из экрана), тогда вам проще будет понять эту концепцию. В сегодняшней статье вы найдете основные виды 3D-трансформаций, которые призваны прояснить свойства трехмерного преобразования в CSS.

Также рекомендуем ознакомиться со статьей про CSS-переходы (transition).

 

 

Трансформация translate3d

Итак, начнем с одной из самых распространенных 3D-трансформаций в CSS, — функции translate3d(). Синтаксис (с префиксами браузерной поддержки) выглядит так:

.content {
 -webkit-transform: translate3d(x, y, z);
 -moz-transform: translate3d(x, y, z);
 -ms-transform: translate3d(x, y, z);
 -o-transform: translate3d(x, y, z);
 transform: translate3d(x, y, z);
}

 

Эта функция задает перемещение элемента в 3D-пространстве. Движение происходит по вектору (x, y, z), где x – перемещение вдоль оси X, y — перемещение вдоль оси Y, а z — вдоль оси Z.

Единицы измерения чаще всего вводятся в пикселях (px), но вы также можете использовать em, rem и %.

 

 

3D перспектива

Свойство CSS perspective: устанавливает позицию элемента в 3D-пространстве, влияя на расстояние между Z-плоскостью и зрителем.

Числовое значение определяет положение. Чем меньше значение – тем ближе элемент будет к экрану (при преобразовании в трехмерное пространство). Чем больше значение, тем глубже он будет.

Важно отметить, что это свойство будет действовать только тогда, когда элемент преобразован с использованием значения 3d-преобразования. Кроме того, оно влияет только на дочерние элементы. То есть, чтобы свойство оказало влияние на данный элемент, вы должны применить его к родительскому элементу.

Синтаксис свойства perspective: выглядит следующим образом:

.content {
 -webkit-perspective: /* значение */;
 -moz-perspective: /* значение */;
 -ms-perspective: /* значение */;
 -o-perspective: /* значение */;
 perspective: /* значение */;
}

 

Это свойство не следует путать с функцией transform: perspective(), которая может быть применена непосредственно к преобразуемому элементу. Обе эти конструкции используют числовое значение. Однако perspective: будет работать как с указанием единицы измерения, так и без него (px, em, rem, %). С другой стороны, transform: perspective() должно иметь указание единицы измерения, чтобы свойство имело какой-либо эффект.

.content {
 -webkit-transform: perspective(n);
 -moz-transform: perspective(n);
 -ms-transform: perspective(n);
 -o-transform: perspective(n);
 transform: perspective(n);
}

 

Примечание. Если в родительском элементе отсутствует значение перспективы, трехмерное преобразование дочернего элемента не будет действовать.

 

 

3D поворот

Теперь рассмотрим трехмерное вращение. По сути, оно следует тем же принципам 3D-транформаций, что и при использовании CSS свойства transform. Однако при вращении вдоль одной оси (например, rotateX()), значение не использует никакие другие единицы, кроме градусов (deg). Таким образом, значение должно быть введено как (ЗНАЧЕНИЕdeg).

С другой стороны, при использовании функции rotate3d() это меняется. Значение градуса указывается для четвертого свойства (angle – угол).

Например, запись:

rotateX(50deg) rotateY(30deg) rotateZ(15deg)

эквивалентна записи:

rotate3d(1, 0, 0, 50deg) rotate3d(0, 1, 0, 30deg) rotate3d(0, 0, 1, 15deg)

 

Синтаксис функции rotate3d() выглядит следующим образом:

.content {
 -webkit-transform: rotate3d(x,y,z,угол);
 -moz-transform: rotate3d(x,y,z,угол);
 -ms-transform: rotate3d(x,y,z,угол);
 -o-transform: rotate3d(x,y,z,угол);
 transform: rotate3d(x,y,z,угол);
}

 

 

Видимость обратной стороны элемента

CSS свойство backface-visibility: действует, когда элемент поворачивается так, что его «задняя часть» становится видимой. У элемента без преобразования к зрителю обращена передняя сторона. Свойство имеет 2 значения: visible (по умолчанию) или hidden.

Синтаксис свойства выглядит следующим образом:

.content {
 -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ backface-visibility: hidden;
}

 

 

3D масштабирование

Для масштабирования элементов мы можем использовать CSS функцию scale3d(). Функция задает трехмерное масштабирование по вектору, который описывается тремя параметрами. Обратите внимание, что параметры принимают только одно число без каких-либо единиц (em, rem, px, %). Синтаксис функции scale3d() выглядит следующим образом:

.content {
 -webkit-transform: scale3d(x,y,z);
 -moz-transform: scale3d(x,y,z);
 -ms-transform: scale3d(x,y,z);
 -o-transform: scale3d(x,y,z);
 transform: scale3d(x,y,z);
}

 

 

3D скос

Мы также можем использовать CSS-преобразование skew (скос) в 2D-пространстве. Хотя это на самом деле не 3D-трансформация, мы все равно ее рассмотрим. Единицы измерения скоса должны вводиться в градусах (deg).

Синтаксис выглядит следующим образом:

.content {
 -webkit-transform: skew(x-угол,y-угол);
 -moz-transform: skew(x-угол,y-угол);
 -ms-transform: skew(x-угол,y-угол);
 -o-transform: skew(x-угол,y-угол);
 transform: skew(x-угол,y-угол);
}

 

 

Начальная точка трансформации

Для указания начальной точки трансформации используется CSS свойство transform-origin:. Оно устанавливает начало преобразования относительно преобразовываемого элемента. Важно отметить, что значения можно вводить в em, rem, px или %. По умолчанию браузеры устанавливают начальную точку трансформации всех преобразований на «50% 50%», что является центром преобразуемого элемента.

Синтаксис выглядит следующим образом:

.content {
 -webkit-transform-origin: x-ось y-ось z-ось;
 -moz-transform-origin: x-ось y-ось z-ось;
 -ms-transform-origin: x-ось y-ось z-ось;
 -o-transform-origin: x-ось y-ось z-ось;
 transform-origin: x-ось y-ось z-ось;
}

 

 

Множественные трансформации

Множественные CSS-преобразования должны быть установлены в одном свойстве transform. Вы не можете использовать несколько значений CSS-преобразования для одного элемента в отдельных свойствах преобразования.

Это означает, что такой код CSS стилей не будет иметь никакого эффекта, поскольку он неправильный:

.content {
 transform: translateX(15px);
 transform: translateY(15px);
}

 

Правильно писать так:

.content {
 transform: translateX(15px) translateY(15px);
}

 

Или так:

.content {
 transform: translate3d(15px, 15px, 0);
}

 

 

 

Короткая и длинная запись

Наконец, давайте рассмотрим синтаксис короткой и длинной записи. Как отмечено выше, множественные значения преобразования для одного элемента должны быть установлены для одного свойства transform. Тем не менее, есть два способа сделать это. Все CSS-преобразования (вращение, масштабирование, трансляция и скос) могут быть определены на отдельных осях. Таким образом, длинный формат записи трансформации будет выглядеть так:

.content {
 transform: translateX(25px) translateY(25px) scaleX(3) scaleZ(4);
}

 

Однако, если мы используем синтаксис трехмерного преобразования (сокращенную запись), приведенный выше код будет выглядеть так:

.content {
 transform: translate3d(25px, 25px, 0) scale3d(3, 0, 4);
}

 

 

 

Текущий уровень поддержки

Модуль 3D-трансформаций в CSS был впервые представлен в 2009 году. Он был создан членами Apple и имел поддержку только в браузере Safari. С тех пор все современные браузеры также добавили поддержку 3D-трансформаций в CSS свойствах. По состоянию на конец 2018 года свойства 3D-преобразований в CSS без префикса браузеров имеют поддержку 98% браузеров. Если вы добавите префикс -webkit-transform, тогда это позволит вам охватить старые браузеры, и вы получите 99% поддержку.