Chapter 5, Exercise 3 – CSS Tranformations To Matrices

Common 2D CSS transformations include translate, rotate, scale, and skew. Which of these can you reproduce using a matrix transformation, and which can’t you reproduce?

This is a bit of a trick question, because the answer is that all of the regular transformations can be reproduced by a matrix. In fact, if you tried to query the transform property of an element then you’ll get a matrix back, as that’s the way the browser keeps track of transformations.

So, for example, if you added the following to the start_game element:

$('#start_game').css('transform')

Then tried to query its transform property with JavaScript with $('#start_game').css(Modernizr.prefixed('transform')) you’d get something like matrix(0, 1, -1, 0, 0, 0) back.

You probably won’t need to know matrices in-depth at the moment, but it’s worth reading about the principals involved so you know what to look for if you need to do some more advanced transformations in the future. This article on matrices https://dev.opera.com/articles/understanding-the-css-transforms-matrix/ is a good place to start.