Interactive online courses HTML Academy
2026-03-09 14:12 Diff
https://htmlacademy.org/courses/dynamic/2d-transforms/fireball-training

Finding himself in a dangerous fantasy world with trolls and werewolfs waiting around every corner, Pendalf must be able to fend for himself. And the best means of attack and defense for any self-respecting battle magician is, as you know, fireballs.

Let’s learn how to throw fireballs at targets in order to protect Pendalf from enemies as the need arises.

To do this, we will utilize the movement spells that we previously learned: translateX, translateY, as well as a new, more laconic spell that combines movement along two axes at once into one function (translate):

transform: translate(movement along the X-axis [, movement along the Y-axis])

The square brackets indicate that the Y-axis offset value is optional. You don’t need to write square brackets in the code, since the two values are simply listed separated by commas, and they can have different units of measurement. If you do not specify a Y-axis offset value, but write translate (X-axis offset), then the offset value along the Y-axis will be considered equal to 0, and the function will work similar to translateX.

// These functions all produce the same result: transform: translate(100px); transform: translate(100px, 0); transform: translateX(100px);

Let’s finally get down to making fireballs!