Matrix Math for the Web
As part of a fellowship with MDN in 2016, I wrote content around the use of matrix math, but with a web content spin.
Matrices can be used to represent transformations of objects in space, and are used for performing many key types of computation when constructing images and visualizing data on the Web. This article explores how to create matrices and how to use them with CSS transforms and the matrix3d transform type.
While this article uses CSS to simplify explanations, matrices are a core concept used by many different technologies including WebGL, the WebXR (VR and AR) API, and GLSL shaders. This article is also available as an MDN content kit. The live examples use a collection of utility functions available under a global object named MDN.