ANIMATED EFFECTS USING CSS3 - Practical CSS3: Develop and Design - page 164

SCALE3D, SCALEZ
The scale3D and scaleZ transform functions don't do much in real terms; they
imply the ability to grow elements along the Z axis, for example, increasing their
height. But HTML elements intrinsically don't have any thickness in this direc-
tion—they are wafer thin. In actual fact, scaleZ will act as a multiplier for the
translateZ function; transform: translateZ(10px) scaleZ(20); would have
the same effect as transform: translateZ(200px) . But you'd be better off just
using translateZ or translate3D instead, as discussed earlier. If you want to give
the impression of an element increasing in size and/or getting closer to the user,
setting a simple 2D scale is often best.
MATRIX3D
As discussed earlier in the “matrix” section, matrix transforms are very powerful
but very complicated and pretty much not within the realms of understanding for
designers and other nontechies! And 3D matrices are even more complicated: They
have 16 values for each function, as opposed to six for 2D matrices! Therefore, I
won't discuss them here (refer to the “matrix” section for links to more information).
PERSPECTIVE, TRANSFORM: PERSPECTIVE, AND PERSPECTIVE-ORIGIN
The transforms you've learned about so far can be used in a 3D space, but the ele-
ments exist on a flat plane, as if they are all right in front of your eyes. In real life,
this is not the case. You see objects in different positions around you in different
perspectives. To simulate this a bit more accurately on the web, you can use the
transform: perspective(); function, the perspective property, and the related
perspective-origin property to make your elements look more three dimensional,
even if they don't have other transforms applied.