Коли з’явилися CSS-трансформації, з елементами стало можливим проводити різні перетворення: їх можна зміщувати, повертати, нахиляти, здавлювати і розтягувати. А за допомогою 3D-перетворень в CSS стали можливими ще більш неймовірні речі. Вони дають можливість розробникам додати новий вимір на свої сайти.
Спочатку тривимірні трансформації можуть здатися трохи приголомшуючими, особливо якщо врахувати, що HTML-полотно (екран монітора) – це 2D-простір. Але якщо ви уявите собі, що ваш сайт має і глибину (вглиб екрану, або виступаючи з екрану), тоді вам простіше буде зрозуміти цю концепцію. У сьогоднішній статті ви знайдете основні види 3D-трансформацій, які покликані прояснити властивості тривимірного перетворення в CSS.
Також рекомендуємо ознайомитись зі статтею про CSS-переходи (transition).
Отже, почнемо з однієї з найпоширеніших 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 і %.
Властивість 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-транформації, що і при використанні 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; }
Для масштабування елементів ми можемо використовувати 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% підтримку.
Якщо хочеш пізнати людину, не слухай, що про неї говорять інші, послухай, що вона говорить…
Вибачення — не означає, що ти не правий, а інша людина має рацію. Це всього…
Атмосферу паперової книги, запах свіжого чорнила і паперу, що трохи залежався, складно замінити гаджетами. Але…