Skip to content
No description, website, or topics provided.
JavaScript HTML CSS
Branch: gh-pages
Clone or download
Pull request Compare This branch is 18 commits ahead, 3 commits behind mdn:gh-pages.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Matrix Math for the Web

This content kit is brief overview of manipulating 3d objects with matrices (a concept from linear algebra.) Matrix math is used heavily in WebGL, but web developers are more familiar with DOM manipulations. This intro divorces the explanation of matrices from the WebGL APIs by using the CSS3 matrix3d transform.

It demonstrates translation, scale, and rotation transformations, as well as exploring how to compose a single matrix transform from multiple transforms through matrix multiplication.


Lesson Code
Multiplication JSFiddle 01-multiplication
Translation JSFiddle 02-translation
Scale JSFiddle 03-scale
Rotation Basics JSFiddle 04-rotate
Rotate X/Y/Z JSFiddle 05-rotate-all
Composition JSFiddle 06-composition

Navigating the lessons

Lessons are located both in this repo and on JSFiddle. The .js files contain the lessons as comments next to the live code. The lessons are designed so that the code can be edited and tweaked for experimentation while following along. When working from the code in the repo, the lessons are located in /lessons and are in alphabetical order.

Getting started (10 min)

The lessons can either be worked online from JSFiddle, or downloaded and explored locally. The content of the lessons is mixed in with the code. The script.js files contain most of the lesson, while the index.html contains the HTML. To download these files either grab the zip file or run git clone from the command line.

Working locally checklist

  1. Verify browser supports unprefixed CSS3 transforms.
  2. Download the lesson files to your machine.
  3. Open the lessons in the browser:
  • Either open the index.html files from the lessons in your browser
  • Or if you are serving files with a local webserver, make sure and serve them from the root directory of the content kit so that the shared js files can be correctly loaded in.

Working on JSFiddle checklist

  1. Verify browser supports unprefixed CSS3 transforms.
  2. Visit the JSFiddle links

Lesson requirements

These lessons require a browser that supports unprefixed CSS3 3d transforms.. The browsers that support this feature are Firefox 16+, Google Chrome 36+, Opera 23+, Safari 9+ and Internet Explorer 10+. It's assumed that the audience is familiar with a basic level web development, CSS, markup, and JavaScript.

Updates and Correction

Submit an issue or a pull request for any corrections or updates. For a history of the updates visit the commit history.

You can’t perform that action at this time.