Что такое 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);
}