Основні види 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% підтримку.