HTML and CSS Reference
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.
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.
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> .