{"id":92,"date":"2015-02-13T18:06:36","date_gmt":"2015-02-13T18:06:36","guid":{"rendered":"http:\/\/buildanhtml5game.com\/?page_id=92"},"modified":"2015-02-13T18:06:36","modified_gmt":"2015-02-13T18:06:36","slug":"chapter-5-exercise-3-css-tranformations-to-matrices","status":"publish","type":"page","link":"http:\/\/buildanhtml5game.com\/?page_id=92","title":{"rendered":"Chapter 5, Exercise 3 &#8211; CSS Tranformations To Matrices"},"content":{"rendered":"<p><em>Common 2D CSS transformations include translate, rotate, scale, and skew. Which of these can you reproduce using a matrix transformation, and which can\u2019t you reproduce?<\/em><\/p>\n<p>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&#8217;ll get a matrix back, as that&#8217;s the way the browser keeps track of transformations.<\/p>\n<p>So, for example, if you added the following to the start_game element:<\/p>\n<p><code>$('#start_game').css('transform')<\/code><\/p>\n<p>Then tried to query its transform property with JavaScript with <code>$('#start_game').css(Modernizr.prefixed('transform'))<\/code> you&#8217;d get something like <code>matrix(0, 1, -1, 0, 0, 0)<\/code> back.<\/p>\n<p>You probably won&#8217;t need to know matrices in-depth at the moment, but it&#8217;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. <a href=\"https:\/\/dev.opera.com\/articles\/understanding-the-css-transforms-matrix\/\">This article on matrices https:\/\/dev.opera.com\/articles\/understanding-the-css-transforms-matrix\/ is a good place to start<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Common 2D CSS transformations include translate, rotate, scale, and skew. Which of these can you reproduce using a matrix transformation, and which can\u2019t 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":22,"menu_order":53,"comment_status":"open","ping_status":"open","template":"practice-answer-page.php","meta":[],"_links":{"self":[{"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages\/92"}],"collection":[{"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=92"}],"version-history":[{"count":1,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages\/92\/revisions"}],"predecessor-version":[{"id":93,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages\/92\/revisions\/93"}],"up":[{"embeddable":true,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages\/22"}],"wp:attachment":[{"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}