Основні види 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% підтримку.
Потрібно більше інформації?
