The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

158 Chapter 13

Each of the m values is a number, but I can’t even begin to explain what

each of them does! I suggest you read an introduction to the subject (http ://

dev.opera.com/articles/understanding-the-css-transforms-matrix/ is a good place

to start) and decide if this is something you want to learn more about.

Here, I provide some simple examples using this code to demonstrate

the functionality:

 .trans-1 { transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,10,10,10,1); }

 .trans-2 { transform: matrix3d(1.5,0,0,0,0,1.5,0,0,0,0,2,0,0,0,10,1); }

 .trans-3 { transform: matrix3d(0.96,-0.26,0,0,0.26,0.96,0,0,0,0,1,0,-10, 0,20,1); }

You can see the results in Figure 13-7. The first (left) example ()

shows the element moved 10px along each axis with the equivalent of the

translate3d() function—the m13, m14, and m15 values in the matrix operate

as translateX(), translateY(), and translateZ(), respectively. In the second

example (), I scaled the image by a factor of 1.5 on the x-axis and y-axis

(the m1 and m6 values) and by a factor of 2 on the z-axis (the m11 value),

which multiplies the translateZ() value (m15) to move the element 20px

along the z-axis, as shown in the middle example. The final example ()

requires a scientific calculator for some trigonometric functions, as I’ve

rotated the element by 15 degrees on the z-axis. To create the rotation,

you need to give a value of cos(15)—which is 0.96—to m1 and m6 and then

sin(15)—that is, 0.26—to m5 and negative sin(15) to m2. I also translated the

element by 10px on the x-axis with the value in m13. You can view the result

on the right in the figure.

Figure 13-7: Transformations applied with the matrix3d() function

As I’m sure you can see, this function is quite powerful—and quite

complex. Whether you want to learn the full potential of matrix3d() depends

largely on you and your projects, but I feel it’s beyond the scope of this book.

Don’t forget you can perform all of these transformations with the individ-

ual functions; you’ll end up with more code, but it will be easier to under-

stand—not only for yourself but also for anyone tasked with maintaining

the website after you!