CSS Transforms

The next kind of thing we do with our HTML elements is transform them from their normal position to a new one. There are two kinds of transforms we do: 2D and 3D.

CSS transforms are all about math, specifically co-ordinate systems. The 2D co-ordinate systems consist of X- and Y-co-ordinates with the X-axis running along the top of an element to the right and the Y-axis running down from the top left of the element.

For the 3D co-ordinate system we just add a third axis coming out from the page. You can think of this like the z-index CSS property where the higher the z-index, the farther out from the page an element resides.