Двумерные трансформации / Тренировка фаерболов [3/32]
×

Тренировка фаерболов [3/32]

В опасном мире фэнтези, где за каждым углом поджидает тролль или оборотень, Пендальф должен уметь постоять за себя. А лучшее средство атаки и защиты для любого уважающего себя боевого мага — это, как известно, фаерболы.

Давайте научимся бросать фаерболы по мишеням, чтобы в случае необходимости защитить Пендальфа от врагов.

Для этого применим изученные ранее заклинания перемещения: translateX, translateY, а также новое более лаконичное заклинание, объединяющее перемещение сразу по двум осям в одну функцию — translate:

transform: translate(перемещение по оси X [, перемещение по оси Y])

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

Значение перемещения по оси Y является необязательным аргументом, то есть если его не указать, а написать translate(перемещение по оси X), то значение перемещения по Y будет считаться равным 0 и функция будет работать аналогично translateX.

Приступим же наконец к огненным процедурам!


Выполнить задание
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 class="fireball fireball-1"></div> <div class="fireball fireball-2"></div> <div class="fireball fireball-3"></div> </div> <div class="target target-right"></div> <div class="target target-top-right"></div> <div class="target target-top"></div> </div> </body> </html>
CSS
.fireball-1 { } .fireball-2 { } .fireball-3 { } .wizard { top: 244px; left: 30px; }
HTML Academy
  1. С помощью функции translateX переместите .fireball-1 вперёд на 310px, чтобы попасть в правую мишень снизу.
  2. .fireball-2 переместите вертикально вверх на 190px, чтобы поразить верхнюю мишень.
  3. Последний шар .fireball-3 бросьте одновременно вперёд на 290px и вверх на 190px в правую верхнюю мишень.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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