Що таке transform в CSS3?

CSS властивість transform дозволяє вам змінювати положення, розмір та орієнтацію елементів у двовимірному або тривимірному просторі. Це потужний інструмент для створення різних візуальних ефектів та анімацій на веб-сторінках.

Основні значення властивості transform:

1. translate(x, y) - переміщує елемент на задану відстань по осях X та Y.

   transform: translate(50px, 100px);

2. translateX(x) - переміщує елемент на задану відстань по осі X.

   transform: translateX(50px);

3. translateY(y) - переміщує елемент на задану відстань по осі Y.

   transform: translateY(100px);

4. scale(x, y) - змінює розмір елемента по осях X та Y.

   transform: scale(1.5, 2);

5. scaleX(x) - змінює розмір елемента по осі X.

   transform: scaleX(1.5);

6. scaleY(y) - змінює розмір елемента по осі Y.

   transform: scaleY(2);

7. rotate(angle) - повертає елемент на заданий кут.

   transform: rotate(45deg);

8. skew(x-angle, y-angle) - нахиляє елемент на задані кути по осях X та Y.

   transform: skew(30deg, 20deg);

9. skewX(angle) - нахиляє елемент на заданий кут по осі X.

   transform: skewX(30deg);

10. skewY(angle) - нахиляє елемент на заданий кут по осі Y.

    transform: skewY(20deg);

11. matrix(a, b, c, d, e, f) - дозволяє задавати більш складні трансформації за допомогою матриці. Параметри a, b, c, d, e, f визначають перетворення.

    transform: matrix(1, 0.5, -0.5, 1, 50, 100);

Комбінування кількох властивостей

Властивість transform дозволяє комбінувати кілька перетворень, перелічуючи їх через пробіл. Наприклад, ви можете одночасно перемістити, повернути і змінити розмір елемента:

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

Приклад використання

Давайте розглянемо приклад, в якому комбінуються кілька властивостей transform, застосованих до елемента при наведенні курсору (використовуючи псевдоклас :hover).

.example {
	width: 100px;
	height: 100px;
	background-color: lightblue;
	margin: 50px;
	transition: transform 0.5s;
}

.example:hover {
	transform: translate(50px, 100px) rotate(45deg) scale(1.5);
}