2D Transforms and Transitions - Beginning CSS3 - page 433

Figure 20-1. The second image is moved 25% of its width to the left, and overlaps the first image

■ Note The examples assume the browser window is wide enough to display both images alongside each other.

In translate_2.html, the image is moved 50px down the page using translateY() like this:

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

As Figure 20-2 shows, moving the image vertically doesn't affect the position of the following paragraph.
The image overlaps the text, obscuring it.

Figure 20-2. The image overlaps the following paragraph when moved vertically

There are two ways to move an element along both axes. One is to use both translateX() and translateY()
separated by a space like this (the code is in translate_3.html):

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