Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 18.11.2022)
83460
солдат
278
самолетов
261
вертолетов
2879
танков
5808
ББМ
1865
артиллерия
209
ПВО
393
РСЗО
4366
машин
16
корабли и катера
Основные виды 3D-трансформаций в CSS

Основные виды 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% поддержку.

 

 

Добавить комментарий

Ваш адрес email не будет опубликован.