Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 02.12.2024)
743920
солдат
369
самолетов
329
вертолетов
9478
танков
19397
ББМ
20953
артиллерия
1019
ПВО
1253
РСЗО
30606
машин
28
корабли и катера
Основные виды 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 не будет опубликован. Обязательные поля помечены *


Быстрый доступ по сайту SebWeo
Угости меня кофе