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

140 Chapter 12

translate

The next function we’ll look at is translate, which moves the element from

its default position along the horizontal or vertical axes (if you need a

refresher, refer to “Understanding Axes and Coordinates” on page 64).

Movement along the horizontal axis is controlled with the translateX()

function and along the vertical axis with translateY():

E { transform: translateX(value) translateY(value); }

Each of these two functions, translateX() and translateY(), moves the ele-

ment along the appropriate axis for the length that you specify. You can use

any length units or percentage values here, so, for example, you could have:

E { transform: translateX(20px) translateY(15%); }

This code moves the element 20px to the right (along the x-axis) and

15 percent of its own height down (along the y-axis). You can see this result

in Figure 12-5.

Figure 12-5: An element positively translated along both axes

You can also use negative values in the translate functions, which

moves the element in the opposite direction along the axis—that is, up

or to the left.

noTe You might think translating elements seems similar to using relative positioning and

the left and top properties, but remember that the transformed element retains its

position in the document flow and only appears to have moved; the visual rendering

of the element is transformed, not the element itself.

The translate() Shorthand Function

A more convenient way to move elements along both axes like this is to use

the shorthand function, translate(). This function accepts up to two values

in a comma-separated list:

E { transform: translate(translateX(),translateY()); }