CSS matrix interactive applet

Introduction

The applet below demonstrates what is going on when we change the various elements of a CSS transformation matrix.

To understand what the following interactive applet is about, see CSS Matrix Math for some background.

In general, if we are performing one transformation at a time, the elements in a transform matrix are as follows:

`( ("scaleX","skewX","translateX"), ("skewY","scaleY","translateY"), (\color(red){0},\color(red){0},\color(red){1}) )`

In CSS transforms, this would be written as (we go down the columns, first 2 rows only):

transform: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)

In particular, scaleX(4) would be:

`( (4,0,0), (0,1,0), (\color(red){0},\color(red){0},\color(red){1}) )`

In CSS transforms, this would be written as:

transform: matrix(4, 0, 0, 1, 0, 0)

Also, skewY(25o) would be (since tan(25^o) = 0.4663):

`( (1,0.4663,0), (0,1,0), (\color(red){0},\color(red){0},\color(red){1}) )`

In CSS transforms, this would be written as:

transform: matrix(1, 0, 0.4663, 1, 0, 0)

As we learned in the CSS Matrix Math article, if we want to apply more than one transform at the same time, the resulting CSS matrix is the result of multiplying the individual transform matrices.

The CSS matrix interactive

Note 1: The matrix expression above the graph is obtained using javascript with:

compStyle = window.getComputedStyle(element, null);

Note 2: The graph uses cartesian directions, so "translateY" means "move up" when positive, but in CSS, "move down" implies positive "translateY".

Note 3: The translations on the sliders are in cartesian coordinates, but show in the matrix expression as pixels.

Things to do

Change each of the sliders to see the effect of the transformation matrix on the original (green) square.

Math used in the applet

Here is some of the math used to create the above applet.

1. Matrix multiplication
2. Transformations, such as scale, skew (shear), rotation, translation