HTML and CSS Reference
In-Depth Information
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 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.
Search WWH ::

Custom Search