Теория — Урок 43

Главная идея

transform меняет, как элемент выглядит: его можно сдвинуть, повернуть, увеличить или скосить. При этом в потоке документа он по-прежнему занимает своё исходное место — соседние блоки ведут себя так, будто элемент никуда не двигался. Именно поэтому transform идеален для hover-эффектов и анимаций: картинка наезжает на соседа, но раскладка страницы не «прыгает».

Представь стол с разложенными фотокарточками. transform — это когда ты берёшь одну карточку и поворачиваешь её, придвигаешь ближе к себе или кладёшь под наклоном. Остальные карточки на столе не сдвигаются — место под повёрнутой фото всё так же «занято». А perspective — это твой взгляд на стол под углом: чем ближе глаз к столу, тем сильнее карточка, поднятая ребром, уходит в глубину.

2D-трансформации: плоскость экрана

Четыре базовые операции работают в плоскости (оси X — вправо, Y — вниз):

translate(x, y) — сдвиг по горизонтали и вертикали (translateX, translateY по отдельности).
scale(n) — масштаб: 1 — без изменений, 1.2 — на 20% больше, 0.8 — меньше.
rotate(deg) — поворот в градусах: положительные значения — по часовой стрелке.
skew(x, y) — наклон-сдвиг граней, превращает прямоугольник в параллелограмм.

Несколько функций можно записать в одном transform через пробел — они применяются справа налево. matrix() объединяет все 2D-операции в одну матрицу из 6 чисел, но вручную её почти не пишут — это внутреннее представление, в которое браузер всё равно сворачивает любой transform.

Точка опоры: transform-origin

По умолчанию поворот и масштаб происходят вокруг центра элемента. transform-origin переносит эту точку: top left — повернёт элемент вокруг левого верхнего угла, как стрелку часов вокруг оси. Без понимания origin повороты «уезжают» не туда, куда ожидаешь.

3D-трансформации: глубина сцены

Чтобы поворот по осям X и Y выглядел объёмно, родителю нужна perspective — расстояние от наблюдателя до плоскости экрана. Малое значение (300px) даёт сильное искажение, большое (1500px) — почти плоское. Оси для 3D: X (горизонтальная), Y (вертикальная), Z (на зрителя).

Оси 3D-вращений: rotateY крутит вокруг вертикали, rotateX — вокруг горизонтали, rotateZ — это обычный плоский поворот.

Когда применять и производительность

Используйте transform для микро-взаимодействий: подъём карточки на hover (translateY(-4px)), лёгкое увеличение кнопки (scale(1.05)), переворот карточки (rotateY(180deg)). Браузер рисует transform и opacity на GPU, не пересчитывая раскладку — это плавно даже на слабых устройствах. А вот анимация left/top или width заставляет браузер заново считать layout каждый кадр и часто тормозит (см. урок 42).

Базовый CSS

📄 lesson-43/styles.css

.flip-card {
  perspective: 800px;
}

.flip-card__inner {
  transform-origin: center;
  transition: transform 220ms ease;
}

.flip-card:hover .flip-card__inner,
.flip-card:focus-within .flip-card__inner {
  transform: translateY(-0.25rem) rotateY(12deg) scale(1.02);
}

.badge {
  transform: skewX(-8deg) rotate(-2deg);
}

Частая ошибка: ждать сдвига соседних блоков. transform не влияет на поток — чтобы реально подвинуть соседей, нужен margin или изменение раскладки.

Урок 43. Теория: Трансформации: transform, 2D/3D