The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

3D Transformations 157

As should be fairly clear, this shorthand simply accepts a number for

each of the values, acting as a scaling factor on the pertinent axis. Here is a

pair of examples to show you 3D scaling in action:

 .trans-z1 { transform: scaleZ(2.5) translateZ(-10px); }

 .trans-z2 { transform: scale3d(1.25,1.25,4) translateZ(10px); }

The results appear in Figure 13-6. The first (left) example () shows

an element with a translateZ() value of −10px and a scaleZ() value of 2.5;

as I mentioned, scaleZ() acts as a multiplier of translateZ(), so the element

moves 25px negatively along the z-axis. In the second example (), I used

the scale3d function to set values of 1.25 on the x-axis and y-axis and 4 on the

z-axis. The resulting element, shown on the right, is 25 percent larger on

the two-dimensional axes, and the scaleZ() value multiplies the translateZ()

value of 10px to move the element 40px along the z-axis.

Figure 13-6: Scaling on different and multiple axes

The Transformation Matrix

One of the more esoteric aspects of 2D transformations that I introduced

in Chapter 12 is the matrix() function. This function allows you to apply

complex transformations using six values (based around a grid pattern)

and some trigonometric calculations. You can also apply 3D transforma-

tions using a matrix with the matrix3d() function. But if you thought the 2D

matrix was hard to grasp, you might want to skip this one—matrix3d() has a

whopping 16 values! Here’s the syntax:

E { transform: matrix3d(

m01,m02,m03,m04,

m05,m06,m07,m08,

m09,m10,m11,m12,

m13,m14,m15,m16

); }

noTe The line breaks are shown here for clarity; you don’t need to use them in practice.