Когда появились 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% поддержку.
Нужно больше информации?
