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.

OMG,It’s amazing for the Chrome,But I want to know the ie is all right?

Is is dead. Fallback to no transitions. Treat the new Webkit properties as extra chrome