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.