Moving objects vertically

Now let’s try to move the objects vertically.

To do this, we will use a function that is like a “horizontal” translateY:

transform: translateY(-100px)

This function will move the object 100 pixels vertically up. Note that we use a negative transform value to move the object up.

As you already saw in the previous assignment, several transform functions can be applied to an object at the same time. In this case, functions are simply listed separated by spaces after the transform property name, for example:

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

This transform will move the object 100 pixels to the right and up along the coordinate axis.

Let’s try to move the magician through the air using the horizontal and vertical movement functions.

And of course, we must not forget to read through the levitation spell so that the wizard is able to fly!