2D Transforms and Transitions - Beginning CSS3 - page 444

Figure 20-14. When objects are skewed, it also affects any text inside them

As the angle increases toward 90°, the object becomes more and more distorted until it disappears
completely at exactly 90°. At 180°, there is no distortion whatsoever.

■ An earlier draft of the specification had a skew() function, but it was removed in march 2012 because
elements are normally skewed only along one axis. Use only skewX() or skewY() . Although you can use both in the
same style rule, they have a tendency to cancel out one another.

Note

Transforming Elements with the matrix() Function
The matrix() function specifies a 2D transform in the form of a transformation matrix
( http://en.wikipedia.org/wiki/Transformation matrix ). The function requires six arguments, all of which
are numbers separated by commas.

■ Unless you're an expert in linear algebra (and i most certainly am not), you can forget about the matrix()
function. Although it allows you to combine multiple transforms in a single operation, everything that the matrix()
function does can be achieved using the individual transform functions described in the preceding sections.
However, read on if you're curious as to how it works.

Tip

The last two arguments always specify the number of pixels you want to move (translate) the element along
the horizontal and vertical axes, respectively. The first four arguments control other transforms.
In most cases, the first and fourth arguments are the scaling factors for the horizontal and vertical axes,
respectively. The second argument usually controls the angle of vertical skew, while the third one controls
horizontal skew. All four arguments are used in combination to rotate the element. What makes using the
matrix() function complicated is the need to convert angles of skew and rotation using trigonometric functions.

Moving Elements
Let's start with a simple example. In translate_4.html, the translate() function moves an image 50px left and
25px down (see Figure 20-3 ) like this:

img:last-child {
transform: translate(-50px, 25px);
}