2D Transforms and Transitions - Beginning CSS3 - page 431

Using 2D Transforms
There are just two properties for 2D transforms, as described in Table 20-1 .

Table 20-1. Properties for Two-Dimensional Transforms
Property

Initial Value Description

transform none Specifies how the element is to be transformed. Takes as its value

a space-separated list of transform functions (see Table 20-2 ).

transform-origin 50% 50% Specifies the anchor point of the transform. Takes one or two

lengths, percentages, or keywords representing the horizontal
and vertical positions, respectively. If only one value is given, the
vertical position defaults to center .

■ The properties in Table 20-1 are also used for 3D transforms. This chapter discusses them only in the
context of 2D transforms.

Note

The transform property expects one or more 2D transform functions as its value. The functions are
described in detail in the following sections.
By default, a transform originates from the center of the element. So, an element rotates around its center.
When you scale an element, it expands or shrinks in all directions. You can change the anchor point from which
the transform originates using the transform-origin property.
The transform-origin property takes one or two values. If both values are set, the first one specifies the
horizontal position of the anchor point, and the second specifies the vertical position. The values can be lengths,
percentages, or keywords.
Lengths and percentages are measured from the top-left corner of the element's border box
(see Figure 6-1 in Chapter 6).
Percentages are relative to the width and height of the element's border box. In the case of a table,
percentages are relative to the table and its caption (if any).
Valid keywords for the horizontal position are left , center , and right . Keywords for the vertical position
are top , center , and bottom .
If only one value is given for transform-origin , it's used for the horizontal position. The vertical position
defaults to center .
The transform and transform-origin properties are not inherited, so if you want child elements to use the
same value as their parent, you can set their value to the inherit keyword.

2D Transform Functions
The draft CSS Transforms module lists ten 2D transform functions. Some affect only one axis. Others affect the
X and Y axes simultaneously. X and Y normally refer to the horizontal and vertical axes, respectively, but as
explained later in this chapter this is not always the case. The functions are described in Table 20-2 .