This is the second part of a mini-series covering css 3d-transformations. If you missed the first part, you can read it here.
Suddenly they were here: with the increasing adoption of CSS3 in modern web-browsers a strange instument showed up in our toolbox, but nobody knew exactly how to use it: transformation-matrices. How could this mathematical object, obviously invented by some crazy geek with a bias for 90ies science-fiction movies happen to get lost in a CSS-proposal?
Open ExampleThe good news first: even though "transformation-matrix" may be difficult to spell, it's less difficult to grasp the concept. Even better: If you don't want to, you don't need to understand it and still can use it anyway. But if you take your time to get the principle behind it you will have a really powerful method at your fingertips to manipulate DOM elements. Flash developers do have an advantage again, as they are already familiar with transformation matrices since flash 8.
Unfortunately there is not too much documentation on the web regarding transformation-matrices for mathematical illiterate folks like us designers. Therefore this little tutorial. Hopefully it is useful for some of you.
What are Matrices?
Matrices are like the warp engine in star-trek: space-time-continuum is changed from the outside, but the people in the star-craft don't notice anything.
Matrices are used for vector calculations (if you don't have any clue what this is, consult a math tutorial near you. At least you should be aware that the green arrows in the graphics on this page are vectors). Programmers do know that vectors and matrices are an important part of game programming. Why? Well, it is possible to alter an object with matrices and still keep its "inner" properties. Think of an airplane: we turn the airplane to the left. Now we want it to fly into the direction of its head, so we command "fly left". We have to do this every time the direction is altered: turn the plane first, then store the new direction and adjust the movement. This can quickly become a complicated task, i. e. if the airplane has to fly a complex path. Here matrices can be really helpful. It is enough to put the airplane into a matrix. From then on we simply tell the airplane to fly straight ahead and apply all the positioning, turning and twisting to the matrix.
Matrices do have some more advantages:
- Its possible to accomplish a lot of manipulations (turning, scaling, shearing, moving) at the same time. And as we have to add vendor specific prefixes for every transformation, it doesn't harm that we can "compress" them into one matrix. This will help keeping our code lean and saving CPU at the same time.
- It is quite easy to combine matrices by using low level math operations: addition, subtraction, multiplication.
How does it look?
A matrix is a sequence of numbers that usually will be stored within an array: i. e. [0.5, 4, 2.3, 1.5] is a simple cubic two-dimensional matrix. As this kind of syntax is difficult to read, it is common to list them line by line:
| 0.5 | 4 |
| 2.3 | 1.5 |
What's the meaning behind these numbers?
Let's think of a square on a piece of paper. Every point within the square has an x- and an y-coordinate. The first row in our Matrix represents the x-vector, the second one the y-vector. Each vector determines how this point will be transformed along the corresponding axis.
The matrix of an undistorted square must scale it along the x axis by the factor of 1 and along the y-axis by the factor of 1. This is called the "identity-matrix":
| 1 | 0 |
| 0 | 1 |
This matrix will narrow the square into half:
| 0.5 | 0 |
| 0 | 1 |
Now let's shear the square along the x-axis, similar to the "skew"-tool in Illustrator. We have to alter the y-value of the X-vector as well:
| 1 | 0 |
| 0.5 | 1 |
You can rotate objects with the matrix as well. In this case it is important to maintain a certain relation of every value in the matrix. Having an idea of trigonometry is beneficial:
| cos(α) | sin(α) |
| -sin(α) | cos(α) |
"α” is the rotation-angle (important: in radian, not degree). Consult Wikipedia for the derivation.
Everything we have demonstrated until now for two dimensional matrices can be applied to three-dimensional space as well. In this case we need one more line for the z-axis and one more column for the z-values of the three vectors in our matrix.
We already learned that the vectors for the undistorted identity-matrix must have a value of "1" along their corresponding axes. Accordingly the identity-matrix for a 3d-transformation will look like this:
| 1 | 0 | 0 | 0 |
| 0 | 1 | 0 | 0 |
| 0 | 0 | 1 | 0 |
| 0 | 0 | 0 | 1 |
I prepared a little demo to play with the values (please use a browser that is capable of displaying 3d CSS transforms):
Open ExampleWait — this is a 4 x 4 matrix. Wouldn't be a 3 x 3 matrix enough?
Until now we used simplified matrices. But usually a matrix will contain some more information besides the vector-coordinates:
| x | x | x | Wx |
| y | y | y | Wy |
| z | z | z | Wz |
| Tx | Ty | Tz | W |
The T-row will re-position the center of the transformation in pixels, allowing us to move the object.
The W-row is tricky. A perspective-projection is determined here. It is our viewpoint along the corresponding axis. Usually you will want this values to be zero except the last one. Play around with this values in the demo. If you're feeling adventurous, google for "homogenous coordinates" ;-).
Example: Coverflow in CSS
Let's test our knowledge with a little example: a picture-gallery in cover-flow style. I will not go into details but post the essential CSS here instead. Everything will work without javascript and additional graphical elements (except the images of course). This special result could be achieved with "rotate-y" as well but, hey, it's a demo, right? Use a CSS 3d capable browser for viewing. Everyone who doesn't have a Webkit nightly on mac, iDevice OS >2 or Safari Leopard can at least watch a video instead:
Open Example
div#stage{
perspective: 600px;
}
img {
transition-property: transform;
transition-duration: 0.7s;
transform: matrix3d(0.7109, 0, -0.703279, 0,
0, 1, 0, 0,
0.703279, 0, 0.7109, 0,
0, 0, 0, 1);
box-reflect:below 15px
gradient(linear, left top, left bottom, from(transparent),
color-stop(0.7, transparent), to(#ff0000));
}
img:hover {
transition-property: transform;
transition-duration: 0.7s;
transform: matrix3d(1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 200, 1);
}
That's it. Where we usually would have needed some 50 lines of javascript-code, a few CSS-properties are enough right now. Isn't technical evolution a wonderful thing?