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.
