курс

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

493 студента 48 сообщений
Последнее обновление: 08 мая 2023
Курс CSS: Transform (трансформация объектов)
3 900 ₽ в месяц
за все курсы Хекслета
Зарегистрироваться
  • Тренажер с практикой
  • Бессрочный доступ к теории
  • Асинхронный формат обучения

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

7 уроков (видео и/или текст)
5 упражнений в тренажере
23 проверочных теста
Помощь в «Обсуждениях»
Доступ к остальным курсам платформы

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

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

Описание

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

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

Продолжительность 7 часов
  • 1

    Введение

    Познакомиться с курсом CSS: Трансформации. Узнать об изучаемых темах и их применении на практике
  • 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 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже

#
Задание
% завершений

Отзывы

Аватар пользователя Вячеслав Михайлов
Вячеслав Михайлов 20 октября 2021

Никита, огромное спасибо Вам за программу "Верстальщик"!!!

Сегодня закончил последний урок. Все 16 курсов пройдены.

К огромному сожалению, финансово не потянул, чтобы заниматься с персональным наставником, поэтому времени на прохождение ушло больше и, возможно, недополучил какую-то дополнительную нужную информацию. Но результатом остался очень доволен!!!

В принципе, уже второй проект мне показал, что без проблем вижу структуру будущего проекта и понимаю с чего начинать и как делать. Раньше целостности картины не видел бы. Ушла боязнь и начал получать удовольствие от работы с проектом.

Конечно же, практики катастрофически не хватает. Но дело сдвинулось с мертвой точки.))

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

Я искренне признателен Вам за Ваш труд, благодаря которому, обучение по программе прошло очень быстро и увлекательно.

Сегодня пойду покорять последний бастион - третий заключительный учебный проект по Программе "Мессенджер «Hexlet Chat»".

Спасибо!!!

К сожалению, на Хекслет нет специального места, где можно было бы размещать подобные топики, поэтому разместил здесь, в обсуждениях к последнему уроку курса.

Рекомендуемые программы
профессия
Верстка с использованием последних стандартов CSS
5 месяцев
с нуля
Старт в любое время