2D Transforms and Transitions - Beginning CSS3 - page 434

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):

img:last-child {
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.

Note

However, the following styles in translate_5.html won't work as you might expect:

img:last-child {
transform: translateX(-50px);
transform: translateY(25px);
}

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.

Caution