HTML and CSS Reference

In-Depth Information

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);

}