Двумерные трансформации / Перемещение по вертикали [2/32]
×

Перемещение по вертикали [2/32]

Теперь давайте попробуем перемещать объекты по вертикали.

Для этого воспользуемся похожей на «горизонтальную» функцией translateY:

transform: translateY(-100px)

Такая функция переместит объект на 100 пикселей вертикально вверх. Заметьте, что для движения вверх используется отрицательное значение трансформации.

Как вы уже увидели в предыдущем задании, к объекту может быть одновременно применено несколько функций трансформации. При этом функции просто перечисляются через пробел после имени свойства transform, например:

transform: translateY(-100px) translateX(100px)

Такая трансформация переместит объект на 100 пикселей вправо и вверх по оси координат.

Давайте попробуем перенести мага по воздуху с помощью функций горизонтальных и вертикальных перемещений.

И конечно же надо не забыть прочитать заклинание левитации, чтобы волшебник мог лететь!

Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Перемещение по вертикали</title> <meta charset="utf-8"> <base href="/assets/course71/"> <link rel="stylesheet" href="world.css"> </head> <body> <div class="world"> <div class="wizard"></div> <div class="tree"></div> </div> </body> </html>
CSS
.wizard { top: 244px; left: 30px; } .tree { top: 178px; right: 150px; }
HTML Academy
  1. Добавьте блоку .wizard класс levitate, чтобы маг смог взлететь.
  2. Переместите мага на 200px вверх с помощью свойства translateY(-200px).
  3. Продвиньте его вперёд, добавив в цепочку свойств translateX(280px).
  4. А затем пропишите ещё translateY(200px) и посадите мага на землю.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.