You have margins or padding or something like that.

margin: 10px 15px 10px 15px; 
// Top, Right, Bottom, Left = TRBL

You don’t repeat yourself, so you can do this

margin: 10px 15px; 
// Vertical, Horizontal = VH

CSS animation using transform. Instead of using the established vertical and horizontal that would work perfectly well on a 2-dimentional screen, CSS decided on X and Y axes (axises, axi, axies, axasses). So, X would be equal to horizontal, and Y would be vertical. Using the established horizontal and vertical would have been mental, right?

So the values that the X axis takes are either positive or negative, a positive value moves the transform effect to the right, horizontally. A negative value, to the left, beyond the start or zero point of the X axis where it joins the Y axis. |__

So the values of the Y axis are positive to move the transform effect down below the X axis, and negative to move it up.

transform: translate(20px, -20px) 
// Horizontal, Vertical = HV <- not VH!

The 2nd value when positive should move up, just as positive X value moves right.
The X and Y should be reversed, and they should use the established H & V but V and then H and not reversed.

Now there are 3 things to remember instead of only one.