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

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

⚡ Кратко

Потренируйся применять transform: сдвиг, масштаб, поворот, наклон, точку опоры и 3D-наклон. Каждый результат можно проверить глазами — он статичен.

Задания

  1. Сдвиг без потока. Поставь два блока рядом. Ко второму примени transform: translate(30px, 0) и убедись, что первый блок не сдвинулся — место под вторым осталось занятым.
  2. Масштаб на hover. Сделай кнопку, которая на :hover увеличивается через transform: scale(1.1) с плавным transition: transform 150ms ease.
  3. Повёрнутый бейдж. Создай угловой бейдж «NEW» и поверни его на rotate(-12deg).
  4. Точка опоры. Возьми один блок и покажи rotate(25deg) с transform-origin: top left и с transform-origin: center. Опиши словами, чем отличается результат.
  5. 3D-карточка. Оберни карточку в контейнер с perspective: 700px и наклони её через rotateY(30deg). Подбери значение perspective так, чтобы наклон выглядел естественно.
Ожидаемый результат заданий 1–5 смотри в разделе ✅ Решения с живыми превью.

Навигация