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

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

transform: transform-function(value);

transform-function: Це функція трансформації, яку необхідно застосувати, така як translate(), rotate(), scale(), skew(), matrix(), або будь-яка інша функція трансформації CSS.

value: Параметри функції трансформації, такі як відстань для translate(), кут для rotate(), масштаб для scale(), кут нахилу для skew(), чи матричні значення для matrix(). Параметри розділяються комами.

Для застосування кількох трансформацій до одного елемента властивість transform можна використовувати для комбінації різних трансформацій. Вони будуть застосовані в тому порядку, в якому вони перераховані.

transform: transform-function1(value) transform-function2(value);

Наприклад:

transform: translate(50px, 50px) rotate(45deg) scale(1.5);

За замовчанням значення властивості transform - none.

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

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

Початковий масштаб елемента - 1. Значення tx і ty від 0 до 1 зменшують елемент, значення більше 1 - збільшують.

/* Збільшення розміру елемента в 1.5 рази по горизонталі */
transform: scaleX(1.5);

/* Зменшення розміру елемента на 20% по вертикалі */
transform: scaleY(0.8);

/* Збільшення розміру по горизонталі на 50% та зменшення по вертикалі на 20% */
transform: scale(1.5, 0.8);

/* Зменшення розміру елемента на 15% по вертикалі і горизонталі */
transform: scale(0.75);

Поворот

Функція rotate() використовується для обертання елемента. Вона приймає аргумент - кут обертання у градусах та обертає елемент на цей кут у годинниковому напрямку.

transform: rotate(angle);

angle: Кут обертання в градусах (наприклад: 45deg). Позитивні значення обертають в годинниковому напрямку, а від'ємні - проти годинникового напрямку.

/* Обертання на 45 градусів */
transform: rotate(45deg);

/* Обертання на -30 градусів (проти годинникового напрямку) */
transform: rotate(-30deg);

Значення rotate можна задати не лише в градусах, але і в "поворотах" (turn). rotate(0.5turn) = rotate(180deg). Але такий прийом мало вживаний.

Зміщення

Функції translateX(tx), translateY(ty) і translate(tx, ty) є 2D трансформаціями, які дозволяють зміщувати елемент по горизонталі (ось X) та вертикалі (ось Y). tx, ty - зміщення від початкового положення відповідно по осі X та Y. Відʼємне значення зміщує елемент вліво та вгору, а додатне - вправо і вниз.

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

transform: translateX(50px); /* Зміщення на 50px вправо */

transform: translateY(-30px); /* Зміщення на 30px вгору */

/* Зміщення на 50px вправо та 30px вгору */
transform: translate(50px, -30px);

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

Центрування елементу по горизонталі та вертикалі можна здійснити за допомогою transform та translate. Щоб центрувати елемент відносно його власного центру, потрібно змістити його на половину ширини та висоти в протилежних напрямках. Але все по порядку...

Спочатку батьківський елемент потрібно спозиціонувати відносно, а елемент дитини - абсолютно і зсунути його зліва на 50% і згори на 50%.

.container { 
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
}

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

Але трансформація transform translate позиціює відносно свого центру, а якщо вказати зміщення у відсотках, то це значення вирахується від розміру самого елемента. Відтак ми можемо зсунути дитину на половину ширини вліво і на половину висоти вгору.

.box {
transform: translate(-50%, -50%);
}

Викривлення

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

transform: skewX(30deg); /* Нахил навколо осі X на 30 градусів */

transform: skewY(-20deg); /* Нахил навколо осі Y на -20 градусів */

/* Нахил навколо осі X на 10 градусів та навколо осі Y на 5 градусів */
transform: skew(10deg, 5deg);

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

Властивість transform-origin використовується для визначення точки, навколо якої застосовуються трансформації (translate, rotate, scale, skew) до елемента. При застосуванні трансформацій точка transform-origin слугує як центральна вісь, навколо якої обертається, масштабується чи нахиляється елемент.

transform-origin: x-координата y-координата;

x-координата: Горизонтальна координата точки (left, center або right або значення в пікселях).

y-координата: Вертикальна координата точки (top, center або bottom або значення в пікселях).

Якщо задати у відсотках 50% 50% - це те ж саме, що і center.