HTML and CSS Reference
In-Depth Information
Figure 20-1. The second image is moved 25% of its width to the left, and overlaps the first image
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);
Search WWH ::

Custom Search