# 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(25`

would be (since tan(25^{o})^{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.

`matrix(1.00, 0.00, 0.00, 1.00, 0.00, 0.00)`

`transform-origin: 50% 50%`

`vector-effect: non-scaling-stroke`

Copyright © www.intmath.com

## Math used in the applet

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

- Matrix multiplication
- Transformations, such as scale, skew (shear), rotation, translation