jQuery 1.4 Animation Techniques - Index of

[ 233 ]
Chapter 9
Translate
Translating an element causes it to move from its original location. Positive values translate
to the right or down the page (depending on the axis), and negative values move it to the
left or up the page. For example, an element could be moved 100 pixels right along the x axis
and 100 pixels down along the y axis using the following transformation matrix:
transform: matrix(1, 0, 0, 1, 100px, 100px);
This matrix function, equivalent to using the transform function: translate(100px,
100px), would cause the targeted element to appear like this:
As we can see in the previous screenshot, the element has moved from its original location
even though it has not been positioned, which we can see is the case in Firebug.
The fifth parameter of the matrix in this example corresponds to the x axis, and the sixth
parameter to the y axis. Don't worry too much about the first four parameters as we will
cover these in more detail shortly.