2D Transforms and Transitions - Beginning CSS3 - page 432

Table 20-2. Two-Dimensional Transform Functions

Function Description

translateX() Moves the element along the X axis by the specified length or percentage.

translateY()

Moves the element along the Y axis by the specified length or percentage.

translate() Moves the element from its default position. Takes two comma-separated lengths

or percentages. The first value represents the horizontal offset and the second the vertical
offset. If only one value is given, the element is moved only horizontally.

rotate() Rotates the element around its anchor point by the specified angle.

scaleX() Scales the element along the X axis by the specified scaling factor.

scaleY()

Scales the element along the Y axis by the specified scaling factor.

scale() Scales the element. Takes one or two numbers as the scaling factor. If one number is given,

both axes are scaled by the same multiplier. If two comma-separated numbers are given, the
first applies to the X axis and the second to the Y axis.

skewX() Skews the element along the X axis by the specified angle.

skewY() Skews the element along the Y axis by the specified angle.

matrix()

Specifies a 2D transform using a transform matrix of six values.

Although six of the function names use a mixture of lowercase and uppercase, all names are case-insensitive.

■ The functions in Table 20-2 do not use browser-specific prefixes. The prefixes are applied only to the
transform and transform-origin properties. for example, to scale an element in WebKit-based browsers, use
-webkit-transform with the unprefixed scale() function.

Note

Changing an Element's Position with translate()
The translate() function and its single-axis counterparts translateX() and translateY() have a similar
effect as relative positioning. They move an element from its default position without affecting the position of
surrounding elements. Used in combination with other transform functions, they can move an element at the
same time as scaling, rotating, or skewing it.

■ Note in geometry, translate means moving every point of an object a constant distance in a specified direction.

To move an element horizontally, use the transform property, and set its value to translateX() with a
length or percentage between the parentheses. A positive length or percentage moves the element to the right.
A negative one moves it to the left. For example in translate_1.html, there's a <div> that contains two images
alongside each other. Both images are 400px wide and are surrounded by a 10px margin. The second image is
moved 25% of its width—in other words, 100px —to the left (see Figure 20-1 ) by the following style:

img:last-child {
transform: translateX(-25%);
}