Урок 43. Обзор урока: Трансформации: transform, 2D/3D

📁 Раздел: Организация CSS ⏱️ Время изучения: ~75 мин 🎯 Сложность: Средняя
#transform #translate #rotate #scale #perspective #rotatex #transform-origin

⚡ Кратко

transform визуально двигает, поворачивает, масштабирует и искажает элемент без изменения места в потоке. Разбираем translate, rotate, scale, skew, perspective, rotateX/Y/Z и transform-origin.

О чём урок

transform визуально двигает, поворачивает, масштабирует и искажает элемент без изменения места в потоке: соседи остаются на местах. В этом уроке разберём 2D-функции (translate, rotate, scale, skew), точку опоры transform-origin, а затем 3D — perspective и rotateX/Y/Z.

Главный плюс темы: результат transform виден статично, поэтому каждый пример можно потрогать глазами без анимации.

Ключевые понятия

  • transform
  • translate
  • rotate
  • scale
  • skew
  • matrix
  • perspective
  • rotateX
  • rotateY
  • rotateZ
  • transform-origin

Структура урока

📖 Теория

Понятия, правила и практическая логика.

🔖 Справочник

Синтаксис и короткие примеры.

💻 Примеры

Рабочая HTML/CSS связка.

⚖️ Старый vs Новый

Что усложняло поддержку и чем заменить.

📝 Задания

Практика для самостоятельной проверки.

✅ Решения

Один из корректных вариантов.

🐛 Ошибки

Типовые проблемы и исправления.

🏠 Домашнее задание

Итоговая мини-практика урока.

🔗 Ресурсы

Документация и повторение.

Навигация