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

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

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

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

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

// Эти функции работают одинаково:
transform: translate(100px);
transform: translate(100px, 0);
transform: translateX(100px);

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