{"id":35768,"date":"2018-01-29T03:01:26","date_gmt":"2018-01-28T17:01:26","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=35768"},"modified":"2018-01-29T12:52:46","modified_gmt":"2018-01-29T02:52:46","slug":"rainbow-games-double-transformation-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/rainbow-games-double-transformation-tutorial\/","title":{"rendered":"Rainbow Games Double Transformation Tutorial"},"content":{"rendered":"
\"Rainbow<\/a>

Rainbow Games Double Transformation Tutorial<\/p><\/div>\n

We were on the “road to personalization” for the web application game we started with yesterday’s Rainbow Games Primer Tutorial<\/a> when “an old chestnut” came up again. It’s happened before, the desire to “double transform” in CSS came about from our emoji … <\/p>\n\n\n
🏃🏾‍♀️<\/td>\n<\/tr>\n<\/table>\n

… table cell mirroring<\/i> styling as per …<\/p>\n


\n<style>
\n* { overflow-x: visible; }
\n
\nselect { font-size: 36px; }
\n
\ntd.runner { width: 50px; word-wrap: break-word; font-size: 36px;
\n transform: scale(-1, 1); -o-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1);<\/i>
\n } \/\/ <\/p>\n\n\n
🏃🏾‍♀️<\/td>\n<\/tr>\n<\/table>\n

tr { max-height: 40px; }
\n<\/style>
\n<\/code><\/p>\n

… necessary to make our running emojis run from left to right (that, alas, also transformed any accompanying … <\/p>\n\n\n
🏃🏾‍♀️ <\/p>\n

Florence<\/p>\n<\/td>\n<\/tr>\n<\/table>\n

… name), was added to in this double transformational clause<\/b> to prove what this wonderful web page<\/a> advice had to say. In other words, a “double transform” CSS styling scenario like the one below …<\/p>\n


\n<style>
\n* { overflow-x: visible; }
\n
\nselect { font-size: 36px; }
\n
\ntd.runner { width: 50px; word-wrap: break-word; font-size: 36px;
\n transform: scale(-1, 1); -o-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1);<\/i>
\n }
\ntr { max-height: 40px; }
\n
\np {
\n display: block;
\n font-size: 12px;
\n -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
\n -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
\n -o-transform: matrix(-1, 0, 0, 1, 0, 0);
\n transform: matrix(-1, 0, 0, 1, 0, 0);
\n} <\/b> \/\/ <\/p>\n\n\n
🏃🏾‍♀️ <\/p>\n

Florence<\/p>\n<\/td>\n<\/tr>\n<\/table>\n

<\/style>
\n<\/code><\/p>\n

… works as a “double transform” to first …<\/p>\n