HTML and CSS Reference
In-Depth Information
In this matrix,
sx
,
sy
, and
sz
are the percentages to scale on that particular axis. These would be in terms
of a fraction or decimal, so that 1.0 is 100%, 2.0 is 200%, 0.5 is 50%, etc. You'll see why the matrix is laid
out this way in a minute.
One thing you need to know about matrix multiplication is that in order to multiply two matrices, the first
matrix must have the same number of
columns
as the second one has
rows.
The first one can have any
number of rows, and the second can have any number of columns, as long as these criteria have been
met. In this case, you are fine, as the first matrix has three columns (
w
,
h
,
d
), and the scaling matrix has
three rows.
So, how do you multiply these things? Let's just go ahead and do it and see if you can see the pattern:
sx 0 0
w h d * 0 sy 0
0 0 sz
This produces the following matrix as a result:
(w * sx + h * 0 + d * 0) (w * 0 + h * sy + d * 0) (w * 0 + h * 0 + d * sz)
When you get rid of all the zeros, it ends up as this:
(w * sx) (h * sy) (d * sz)
This is logical, as you are multiplying the width (x-axis measurement) by the
x
scaling factor, the height by
the
y
scaling factor, and the depth by the
z
scaling factor. But, what exactly did we do there? All those
zeros kind of clutter things up, so let's abstract it a bit to make the pattern clearer.
a b c
u v w * d e f
g h i
Now you can see the pattern emerge in this result:
(u * a + v * d + w * g) (u * b + v * e + w * h) (u * c + v * f + w * i)
You can see that you move across the first row of the first matrix (
u
,
v
,
w
) and multiply by each first
element in each row of the second (
a
,
d
,
g
). Adding those together gives you the first element for the first
row of the resulting matrix. Doing the same with the second column of the second matrix (
b
,
e
,
h
) gives
you the second column result.
If you have more than one row in the first matrix, you repeat the actions with that second row, which gives
you the second row of the result:
u v w a b c
x y z * d e f
g h i
This returns a 2 × 3 matrix:
(u * a + v * d + w * g) (u * b + v * e + w * h) (u * c + v * f + w * i)
(x * a + y * d + z * g) (x * b + y * e + z * h) (x * c + y * f + z * i)
