explained in the last section. So, applying both translateZ(10px) and
scaleZ(2) would translate an element 20 pixels along the z-axis.
There’s also a shorthand property, scale3d(), which, like
translate3d(), takes three values, one for each of the individual
functions: scale3d(x,y,z). So, in the following code example, the same
transformation applies to both of the elements:
transform: scaleX(1.5) scaleY(1.5) scaleZ(0.75);
The perspective() function is quite simple, but what it actually does is
quite complex. The function takes a single value, which is a length unit
greater than 0 (zero). Explaining this is a little complicated; the length is like
a distance between you and the object that you’re viewing (a tutorial on
Eleqtriq has a more technical explanation and diagram). For our purposes,
you just need to know that the lower the number, the more extreme the 3D
eﬀect will appear; any value below 200px, for example, will make the
transformation appear very exaggerated, and any value of 1000px or more
will seem to have no eﬀect at all.
In our third example, we have three transformed elements, each with a
diﬀerent value for the perspective() function: 25px, 50px and 200px,
respectively. Although the diﬀerence between the three is very discernible,
it’s even clearer when you mouse over to see the transformations removed.
Smashing eBook #19│Mastering CSS3│ 110