CSS: Transform (трансформация объектов)

Включено в курс

Чему вы научитесь

• Вращать, перемещать и искажать двумерные объекты на странице
• Создавать эффект псевдотрехмерности с помощью трансформаций
• Переводить плоские объекты в объёмные, добавляя для них новую ось
• Использовать трансформации для трехмерных объектов
• Создавать перспективу и управлять точкой зрения на объект
• Определять точку трансформации на объекте

Описание

На этом курсе вы изучите трансформацию в CSS. Вы узнаете больше о перемещении, вращении и деформации блоков. В итоге вы научитесь создавать креативные блоки, использовать эффект псевдотрехмерности, добавлять движение блоков. Трансформации пригодятся, если вы решите заниматься анимациями и созданием дизайнерских макетов. Знания из этого курса помогают программистам реализовывать сложные дизайнирские проекты, которые используют в рекламных целях. Этот курс подойдет фронтенд-программистам, которые хотят разобраться в красивых анимациях.

Тема трансформаций всегда идет рядом с позиционированием. Трансформации часто используются при использовании относительно-абсолютного позиционирования и псевдоэлементов. Чтобы эти темы не мешали вам проходить курс, советуем предварительно пройти курсы:

1. Основы верстки контента
2. CSS: Позиционирование элементов

Программа курса

• 1

  Введение

  Знакомимся с целями и задачами курса CSS: Трансформации

  теория
• 2

  2D трансформации. Перемещение

  Изучаем работу функции translate и учимся перемещать объекты на странице с ее помощью

  теория

  тесты

  упражнение

• 3

  2D трансформации. Вращение

  Учимся вращать объекты с помощью функции rotate

  теория

  тесты

  упражнение

• 4

  2D трансформации. Масштабирование

  Изучаем масштабирование HTML-элементов с использованием функции scale свойства transform

  теория

  тесты

  упражнение

• 5

  2D трансформации. Наклон

  Поговорим о возможности наклонения HTML-элементов с использованием функции skew свойства transform

  теория

  тесты

  упражнение

• 6

  3D трансформации. Основы

  Поговорим о трехмерном пространстве и чем оно отличается от двухмерного

  теория

  тесты

• 7

  3D трансформации. Функции

  Учимся использовать изученные ранее трансформации в трехмерном пространстве

  теория

  тесты

• 8

  Самостоятельная работа

  Дополнительные задания, которые позволяют закрепить полученную теорию
• 9

  Дополнительные материалы

  Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса

Формат обучения

Испытания

Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже