HTML and CSS Reference
In-Depth Information
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.
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.
Search WWH ::

Custom Search