Search IntMath
Close

450+ Math Lessons written by Math Professors and Teachers

5 Million+ Students Helped Each Year

1200+ Articles Written by Math Educators and Enthusiasts

Simplifying and Teaching Math for Over 23 Years

# 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(25o) = 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)

scaleX
skewYo
skewXo
scaleY
transX
transY
rotateo

transform-origin: 50% 50%

vector-effect: non-scaling-stroke

## 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

## Problem Solver This tool combines the power of mathematical computation engine that excels at solving mathematical formulas with the power of GPT large language models to parse and generate natural language. This creates math problem solver thats more accurate than ChatGPT, more flexible than a calculator, and faster answers than a human tutor. Learn More.