Skip to main content

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

Copyright © www.intmath.com

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

top

Search IntMath, blog and Forum

Search IntMath

Online Math Solver

This math solver can solve a wide range of math problems.

Math Lessons on DVD

Math videos by MathTutorDVD.com

Easy to understand math lessons on DVD. See samples before you commit.

More info: Math videos

The IntMath Newsletter

Sign up for the free IntMath Newsletter. Get math study tips, information, news and updates each fortnight. Join thousands of satisfied students, teachers and parents!


See the Interactive Mathematics spam guarantee.