Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 15.03.2024)
428420
осіб
347
літаків
325
гелікоптерів
6758
танків
12949
ББМ
10580
артилерія
717
ППО
1017
РСЗВ
13993
машин
26
кораблі і катери
Основні види 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% підтримку.

 

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься. Обов’язкові поля позначені *