CSS: Transform (трансформация объектов)
- Тренажер с практикой
-
Бессрочный доступ к теории
-
Асинхронный формат обучения
Включено в курс
Чему вы научитесь
- Вращать, перемещать и искажать двумерные объекты на странице
- Создавать эффект псевдотрёхмерности с помощью трансформаций
- Переводить плоские объекты в объёмные, добавляя для них новую ось
- Использовать трансформации для трёхмерных объектов
- Создавать перспективу и управлять точкой зрения на объект
- Определять точку трансформации на объекте
Описание
Курс посвящён трансформации объектов на странице с помощью модуля CSS Transforms Module Level 1 и CSS Transforms Module Level 2. Использование трансформации позволяет создавать множество эффектов на странице: от небольших визуальных изменений до создания многоступенчатой сложной анимации.
Уроки курса
-
2
2D трансформации. Перемещение
Изучить работу функции translate и, с её помощью, научиться перемещать объекты на странице -
3
2D трансформации. Вращение
Научиться вращать объекты с помощью функции rotate. Изучить возможности выбора точки вращения у объекта используя свойство transform-origin -
4
2D трансформации. Масштабирование
Изучить масштабирование HTML элементов с использованием функции scale свойства transform. Узнать о влиянии масштабированного элемента на своих соседей. -
5
2D трансформации. Наклон
Узнать о возможности наклонения HTML элементов с использованием функции skew свойства transform. Разобраться в принципах искажении элемента по нескольким осям -
6
3D трансформации. Основы
Узнать о понятии трёхмерного пространства и чем оно отличается от двухмерного. Научиться работать с перспективой трёхмерных объектов в CSS -
7
3D трансформации. Функции
Научиться использовать изученные ранее изученные трансформации в трёхмерном пространстве. Разобраться с перемещением, вращением и масштабированием по трём осям -
8
Самостоятельная работа
Дополнительные задания, которые позволяют закрепить полученную теорию -
9
Дополнительные материалы
Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса
Формат обучения
Испытания
Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже
| # | Задание | % завершений |
|---|---|---|
| 1 | Логотип «Hexlet» | 60% |
Впечатления
Никита, огромное спасибо Вам за программу "Верстальщик"!!!
Сегодня закончил последний урок. Все 16 курсов пройдены.
К огромному сожалению, финансово не потянул, чтобы заниматься с персональным наставником, поэтому времени на прохождение ушло больше и, возможно, недополучил какую-то дополнительную нужную информацию. Но результатом остался очень доволен!!!
В принципе, уже второй проект мне показал, что без проблем вижу структуру будущего проекта и понимаю с чего начинать и как делать. Раньше целостности картины не видел бы. Ушла боязнь и начал получать удовольствие от работы с проектом.
Конечно же, практики катастрофически не хватает. Но дело сдвинулось с мертвой точки.))
Начал достаточно свободно ориентироваться в документации и перестал пытаться все запоминать, а вместо этого научился понимать логику действий. Ну а дальнейшая практика закрепит в сознании то, чего пока не запомнил, но знаю где подсмотреть в случае необходимости.
Я искренне признателен Вам за Ваш труд, благодаря которому, обучение по программе прошло очень быстро и увлекательно.
Сегодня пойду покорять последний бастион - третий заключительный учебный проект по Программе "Мессенджер «Hexlet Chat»".
Спасибо!!!
К сожалению, на Хекслет нет специального места, где можно было бы размещать подобные топики, поэтому разместил здесь, в обсуждениях к последнему уроку курса.
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
