Трансформации позволяют изменять положение, размер, угол наклона и поворот элемента. Они не влияют на соседние элементы (как при `position: relative`).

1. translate() — перемещение

Сдвигает элемент относительно его исходного положения. Значения могут быть в пикселях, процентах, `em`, `rem`.

Возможные варианты:

• translate(x, y) — сдвиг по горизонтали и вертикали
• translateX(x) — только по горизонтали
• translateY(y) — только по вертикали

.translate {
    transform: translate(20px, 30px);
}

2. rotate() — поворот

Поворачивает элемент вокруг своей оси. Значения в градусах (deg), оборотах (turn), радианах (rad).

.rotate {
    transform: rotate(15deg);
}

3. scale() — масштабирование

Увеличивает или уменьшает элемент. Значения: 1 — исходный размер, больше 1 — увеличение, меньше 1 — уменьшение.

Возможные варианты:

• scale(x, y) — масштаб по горизонтали и вертикали
• scaleX(x) — только по горизонтали
• scaleY(y) — только по вертикали

.scale-up {
    transform: scale(1.5);
}
.scale-down {
    transform: scale(0.7);
}

4. skew() — наклон

Наклоняет элемент. Значения в градусах (deg).

Возможные варианты:

• skewX(x) — наклон по горизонтали (верх сдвигается, низ остаётся)
• skewY(y) — наклон по вертикали (правый край сдвигается, левый остаётся)
• skew(x, y) — наклон по горизонтали и вертикали одновременно

skewX(10deg) — наклон по горизонтали

.skew-x {
    transform: skewX(10deg);
}

skewY(5deg) — наклон по вертикали

.skew-y {
    transform: skewY(5deg);
}

skew(10deg, 5deg) — наклон по обеим осям

.skew-both {
    transform: skew(10deg, 5deg);
}

5. transform-origin — точка трансформации

Задаёт точку, относительно которой происходит трансформация (по умолчанию — центр элемента: 50% 50%).

Возможные значения: ключевые слова (top, left, center, bottom, right), проценты, пиксели.

.rotate-center {
    transform: rotate(15deg);
    transform-origin: center;
}
.rotate-top-left {
    transform: rotate(15deg);
    transform-origin: top left;
}

6. Несколько трансформаций одновременно

Можно применять несколько трансформаций к одному элементу. Они применяются по порядку справа налево.

.multiple {
    transform: translate(50px, 0) rotate(15deg) scale(1.2);
}