2019-05-01+net

Vectors and matrices

Let’s start with a square that has its top-left cover
with coordinates (0,0) as it was aligned to the top-
left corner. This object has the following values:

O Position: absolute
O Left: 0px
O Top: 0px
O Width: 200px
O Height: 100px

When we apply the following transform:

transform: matrix (-1,-1,-1,1,1,1)

We need to multiply each set of the box’s corner
coordinates – eg the top-left one is (0,x,y) – with
a matrix. This is what we saw before as a matrix-
vector dot operation. The new object will transform
into a new position.

SCALING
Let’s assume we want to squeeze the ustwo image
logo horizontally by 50 per cent and vertically by 80
per cent. The matrix transform will look like this:

| 0.5 0 |
| 0 0.2 |

Here 0.5 represents the scaling on the x axis and the
0.2 (1-0.8) represents the scaling on the y axis.
See the image on the top left for how ustwo logo
looks after applying the transform CSS operation.

transform: matrix(0.5, 0, 0, 0.2, 0, 0);

ROTATION
For a rotation operation, you will need some
knowledge of trigonometry.
In maths, every vector can form a right triangle
with the cartesian axis. So when doing a rotation,
the new x, y of the rotated vector are calculated by
multiplying the original vector magnitude with the
sine and cosine of the angle of the desired rotation as
following the rules of trigonometry, where:

sin Ơ = opposite ÷ hypotenuse
frv#Ơ = adjacent ÷ hypotenuse

So:

xnew = vector magnitude cos(desired angle)
ynew = vector magnitude sin(desired angle)

In order to rotate the ustwo image logo, we need
to imagine each pixel as a vector that needs to be

rotated a certain angle on a 2D plane (eg 90 degree,

dovr#nqrzq#dv#Ē27,1

transform: matrix(6.12323e-17, 1, -1, 6.12323e-17, 0, 0);

If we now want to combine rotation and scaling, we

can do that using what we’ve learnt up until now and

multiply the rotation matrix for the scaling matrix in

two ways:

ROTATION X SCALING

transform: matrix(3.06162e-17, 0.2, -0.5, 1.22465e-17, 0,

0);

SCALING X ROTATION

transform: matrix(3.06162e-17, 0.5, -0.2, 1.22465e-17, 0,

0);

Don’t forget, you can head over to this CodePen to

play with matrices in CSS yourself: https://codepen.io/

ustwo-ldn/pen/bzNyMM

Top The ustwo logo after

applying the transform

‘matrix(0.5, 0, 0, 0.2, 0, 0)’

Middle top The

ustwo logo after

applying the rotation

‘m a t r i x (6 .12 32 3 e -17, 1, -1,

6.12323e-17, 0, 0)’

Middle bottom

Multiplying the above

rotation matrix by the

scalar matrix

Above Multiplying the

above scalar matrix by the

rotation matrix