{"id":89,"date":"2015-02-13T18:04:52","date_gmt":"2015-02-13T18:04:52","guid":{"rendered":"http:\/\/buildanhtml5game.com\/?page_id=89"},"modified":"2015-02-13T18:04:52","modified_gmt":"2015-02-13T18:04:52","slug":"chapter-5-exercise-2-css-transformation-matrices","status":"publish","type":"page","link":"http:\/\/buildanhtml5game.com\/?page_id=89","title":{"rendered":"Chapter 5, Exercise 2 &#8211; CSS Transformation Matrices"},"content":{"rendered":"<p><em>Create a transformation matrix to flip an element from left to right to make it appear mirrored.<\/em><\/p>\n<p>You could add the following to the definition for the start_game element in main.css:<\/p>\n<p><code>#start_game<br \/>\n{<br \/>\n&nbsp;&nbsp;display: block;<br \/>\n&nbsp;&nbsp;transform:  matrix(-1, 0, 0, 1, 0, 0);<br \/>\n&nbsp;&nbsp;-moz-transform:  matrix(-1, 0, 0, 1, 0, 0);<br \/>\n&nbsp;&nbsp;-webkit-transform:  matrix(-1, 0, 0, 1, 0, 0);<br \/>\n&nbsp;&nbsp;-ms-transform:  matrix(-1, 0, 0, 1, 0, 0);<br \/>\n}<\/code><\/p>\n<p>Note that this doesn&#8217;t help a great deal for reading the text!<\/p>\n<p><a href=\"http:\/\/buildanhtml5game.com\/wp-content\/uploads\/2015\/02\/Ex_5_2.png\"><img decoding=\"async\" src=\"http:\/\/buildanhtml5game.com\/wp-content\/uploads\/2015\/02\/Ex_5_2.png\" alt=\"Flipped Start Game Dialog\" width=\"960\" class=\"alignnone size-full wp-image-90\" srcset=\"http:\/\/buildanhtml5game.com\/wp-content\/uploads\/2015\/02\/Ex_5_2.png 1000w, http:\/\/buildanhtml5game.com\/wp-content\/uploads\/2015\/02\/Ex_5_2-300x221.png 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Create a transformation matrix to flip an element from left to right to make it appear mirrored. You could add the following to the definition for the start_game element in main.css: #start_game { &nbsp;&nbsp;display: block; &nbsp;&nbsp;transform: matrix(-1, 0, 0, 1, 0, 0); &nbsp;&nbsp;-moz-transform: matrix(-1, 0, 0, 1, 0, 0); &nbsp;&nbsp;-webkit-transform: matrix(-1, 0, 0, 1, 0, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":22,"menu_order":51,"comment_status":"open","ping_status":"open","template":"practice-index-page.php","meta":[],"_links":{"self":[{"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages\/89"}],"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=89"}],"version-history":[{"count":1,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages\/89\/revisions"}],"predecessor-version":[{"id":91,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages\/89\/revisions\/91"}],"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=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}