The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

2D Transformations 141

That being the case, you could replicate the transformation shown in
Figure 12-5 using the shorthand function with two arguments:

E { transform: translate(20px,15%); }

And you are allowed to use only one value with the translate()
shorthand:

E { transform: translate(20px); }

In this case, the value provided is presumed to be the translateX()
value, and a value of 0 (zero) is used for translateY(). So both of the follow-
ing declarations are equivalent:

E { transform: translate(20px,0); }
E { transform: translate(20px); }

Using the translate() Function

To illustrate how the translate() shorthand function works, here are two
more examples:

h2.translate-1 { transform: translate(-20px,20px); }
h2.translate-2 { transform: translate(20px,-20px); }

You can see the results of this code displayed in Figure 12-6, again with
elements in a lighter gray showing the original position.

Figure 12-6: Elements showing effects of different values in the translate() function

In the first example, the translate() function has an initial argument
of −20px and a second of 20px, so the element is translated 20px negatively
on the horizontal axis (to the left) and 20px positively on the vertical axis
(to the bottom). The second example has the opposite arguments, so the
element is moved positively on the horizontal axis (to the right) and nega-
tively on the vertical axis (to the top).