HTML and CSS Reference

In-Depth Information

MATRIX

I won't discuss the
matrix
transform function in any great detail, because it is very

complicated. If you have years of experience with SVG, and/or are a math geek,

you'll be familiar with these so-called transform matrices: They take the form of

algebraic expressions. For example, the equivalent of
transform: rotate(30deg);

as a matrix would be:

transform: matrix(cos(30), sin(30deg), -sin(30deg), cos(30deg), 0, 0);

Transform matrices are very powerful because you can effectively use a single

matrix to apply multiple transforms at once. However, they are unreliable and

overcomplicated. In my opinion, you are better off just using multiple transform

functions as explained in the previous section.

NOTE:
If you want to read more details on matrix transformations, read

by Tiffany Brown. The website
www.w3.org/TR/SVG/coords.html#TransformMatrixDefined

also provides a pure matrix explanation.

3D TRANSFORMS

Now let's pop up from the flat world of 2D and look at transforms that work in

three dimensions. These are slightly more limited in support (at the time of this

writing, Opera didn't yet support them), but it definitely won't be long before you

see support across the full gamut of modern browsers!

Let's explore the properties you have to work with.

TRANSLATE3D, TRANSLATEZ

3D translations work in the same way as 2D translations (see the earlier “translate,

translateX, translateY” section for full details) except you can move elements along

the Z axis as well—that is, into and out of the screen. You would think that if you

translate elements along the Z axis, they would move closer and farther away from

you, making them appear bigger and smaller.

However, in practice it doesn't quite work that way. Look at the transform-

3dtranslate.html example. As in previous examples, this contains the example

container along with a ghost. However, this time the two containers are inside a

wrapper
<div>
.