2D-трансформації

CSS-трансформації дозволяють зсувати, змінювати масштаб і повертати елементи, тобто додавати декоративні ефекти. Трансформації змінюють форму і положення елемента, не впливаючи на інші елементи сторінки. За замовчуванням трансформація відбувається щодо центру елемента, але це можна змінити.

Властивість transform

Відповідає за застосування однієї або більше трансформації до елемента.

transform: none | <тип трансформації> <тип трансформації> ...

Трансформований елемент - це елемент з будь-яким встановленим значенням властивості transform, відмінним від none.

Масштабування

Функції scaleX(tx), scaleY(ty) і scale(tx, ty) масштабують блок по ширині та/або висоті, не впливаючи на геометрію оточуючих елементів. Якщо для scale() вказано одне значення, друге буде таке саме.

.box {
  transform: scale(1.15);
}

Початковий масштаб елемента - 1. Значення від 1 до 0 зменшують елемент, більше 1 - навпаки, збільшують. Наприклад, значення scale(1.25) - це 125% від початкового розміру, а scale(0.75) - 75%.

Увага

Анімація прикладів зроблена для візуалізації зміни властивостей і поведінки елементів.

Поворот

Функція rotate(кут) повертає елементи на задану кількість градусів (одиниця deg). Додатні значення повертають елемент за годинниковою стрілкою, від'ємні - проти.

.box {
  transform: rotate(45deg);
}

Цікаво

Значення можна передати не тільки в градусах, а й в «оборотах» (одиниця turn). Наприклад, rotate(0.5turn) - це половина обороту, аналог rotate(180deg).

Зміщення

Функції translateX(tx), translateY(ty) і translate(tx, ty) переміщують елемент в горизонтальному (вісь X) та/або вертикальному (вісь Y) напрямках щодо початкового положення.

• Додатні значення X зміщують елемент вправо, від'ємні - вліво.
• Додатні значення Y зміщують елемент вниз, від'ємні - вгору.

Значення можуть бути в пікселях або відсотках. Якщо значення задане у відсотках, то воно розраховується на підставі розміру елемента, що зміщується.

.box {
  transform: translate(100px, 200px);
}

Центрування елемента

Розглянемо прийом, за допомогою якого можна поставити абсолютно позиційований елемент точно по центру блоку, щодо якого він позиціонується. Техніка дуже проста і складається з трьох кроків.

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

1. Абсолютно позиціонуємо елемент щодо предка.
2. Задаємо елементу властивості top і left зі значенням 50%, це поставить верхній лівий кут елемента рівно по центру предка.
3. Задаємо елементу від'ємне зміщення (translate) по 50% його висоти і ширини. Це посуне елемент вгору і вліво, і відцентрує всередині предка.

Викривлення

Функції skewX(кут), skewY(кут) і skew(x-кут, y-кут) використовуються для викривлення (нахилу, деформування) сторін елемента щодо координатних осей. Якщо для skew() вказане тільки одне значення, друге дорівнюватиме 0, тобто це буде аналог skewX().

.box {
  transform: skew(30deg);
}

Точка трансформації

Властивість transform-origin дозволяє змістити точку трансформації, щодо якої відбувається зміна положення, розміру або форми елемента. Значення за замовчуванням — center, або 50% 50%. Задається лише для трансформованих елементів. Не наслідується.

У прикладі точка трансформації кожного елемента позначена синьою міткою. Значення можна вказувати не тільки ключовими словами, а також в пікселях або відсотках.