HTML and CSS Reference
This moves the second image 25px down and 50px to the left, as shown in Figure 20-3 .
Figure 20-3. The image is moved both horizontally and vertically
The alternative—and much simpler—way is to use the translate() function with two arguments: the first
for the horizontal axis, and the second for the vertical axis like this (the code is in translate_4.html):
transform: translate(-50px, 25px);
This produces exactly the same result as Figure 20-3 .
■ When using translate() , the values must be in the correct order: horizontal followed by vertical.
The individual translateX() and translateY() functions can be in either order because there's no ambiguity.
However, the following styles in translate_5.html won't work as you might expect:
Although both declarations are using different functions, the normal rules of the cascade apply. The second
value overrides the first one, so the image is moved only vertically.
■ All transforms that apply to an element must be specified as a space-separated list in the same style
declaration. otherwise, the last declaration overrides any previous ones.