HTML and CSS Reference

In-Depth Information

General Transformations with Matrices

The translation, scale, skew, and rotate effects can all be combined in a single transfor-

mation style using the
matrix()
function, which has the syntax

transform: matrix(
n
,
n
,
n
,
n
,
n
,
n
)

where each
n
refers to a specific value in a 3

3 transformation matrix. To fully under-

stand how to use a transformation matrix, you have to study matrix theory, which is

beyond the scope of this topic. However, you can use some basic patterns to achieve

different visual effects. For example, to translate a page object, use the function

3

matrix(0, 0, 0, 0,
offX
,
offY
)

where
offX
and
offY
are the translations in the horizontal and vertical directions,

respectively. To scale an object, use

matrix(
x
, 0, 0,
y
, 0, 0)

where
x
and
y
are the scale factors in the horizontal and vertical directions, respectively.

To rotate an object, use

matrix(cos(
angle
), sin(
angle
), -sin(
angle
), cos(
angle
), 0, 0)

where
angle
is the angle of rotation. Finally, to skew an object, use

matrix(1, tan(
angleY
), tan(
angleX
), 1, 0, 0)

where
angleY
is the skew angle in the vertical direction, and
angleX
is the skew angle

in the horizontal direction. Note that CSS doesn't support the
cos()
,
sin()
, or
tan()

functions, so you have to calculate these values yourself. You can combine all of these

effects within the same
matrix()
function. For example, the function

matrix(2, 0, 0, 2, 10, 20)

doubles the size of the object and moves it 10 pixels to the right and 20 pixels down.

Once you have mastered the
matrix()
function, you can use it for all of your object

transformations.

Transformations in Three Dimensions

CSS3 also supports a collection of three-dimensional (3D) transformation functions. With

the addition of a third spatial axis, you can create effects in which an object appears

to zoom toward and away from users, or rotate in three-dimensional space. Three-

dimensional transformations assume the existence of three spatial axes: an
x
-axis that runs

horizontally across the page, a
y
-axis that runs vertically, and a z-axis that comes straight

off the page toward and away from users, as illustrated in Figure 8-17. Positive
z
-values

come out of the page toward users, while negative
z
-values recede away from users.