ANIMATED EFFECTS USING CSS3 - Practical CSS3: Develop and Design - page 152

FIGURE 5.2 A simple container example. FIGURE 5.3 A 2D translate transform in action.

2D TRANSFORMS

Generally, websites are thought of as working in two dimensions, so to start this
discussion, I'll keep it flat and simple. The functions and properties you have for
transforming elements in two dimensions are discussed in the following sections.
In the chapter5 code download folder, you'll find a series of transform- files
demonstrating different transforms applied to a simple container. You can find the
example without any transforms applied in transform-template.html ( Figure 5.2 );
the others are named intuitively.

TRANSLATE, TRANSLATEX, TRANSLATEY
translate simply moves the element it is applied to by the amount you specify
in the value. If you look at transform-2dtranslate.html, you'll see the following
declaration applied to the container:

transform: translate(200px,100px);

This makes the element move 200 pixels to the right and 100 pixels down, as
shown in Figure 5.3 . Note that in each of these examples, I've included a “ghost”
version of the element to show the original position, so it is easy to see exactly
what's happened.
Yo u c a n u s e a n y d i s t a n c e u n i t s t h a t m a k e s e n s e ; p e r c e n t a g e v a l u e s w i l l b e a
percentage of the width or height of the container you are transforming, not its
parent container. If you use negative units, you will translate the container left
instead of right and up instead of down.