ANIMATED EFFECTS USING CSS3 - Practical CSS3: Develop and Design - page 153

If you want to move the container in only one direction, you could set the
other value to 0, for example; use the following line if you want to just move the
container 200 pixels to the right:

transform: translate(200px,0);

or simply omit it altogether:

transform: translate(200px);

Be warned, however: If you specify only one value inside a translate trans-
form, the browser will assume that it is an X transform and assume Y and Z are 0.
It is therefore better to be more explicit about the direction you want to translate
in, and use this:

transformX: translate(200px);

or this:

transformY: translate(200px);

if you want to move it along the vertical axis.

X , Y , AND Z AXES

X, Y, and Z are talked about a lot in this chapter. They refer to the X, Y, and Z
axes of the web page, which transforms, transitions, and animations move
elements along. X is the horizontal axis, moving from left to the right on the
page (so a negative X value would mean movement from right to left). Y is
the vertical axis, moving from top to bottom (a negative Y value would mean
movement from bottom to top). The Z axis moves out of the screen “toward
the viewer,” so from farther away to closer in distance; negative Z would do
the opposite.