title: Flipping/Inverting/Mirroring text using css only
body: <p>I did some googling and here's my answer</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mirror {
    display: block;
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--[if IE]&gt;
  &lt;style&gt;
      .mirror {
          filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
      }
  &lt;/style&gt;
  &lt;![endif]--&gt;
  
  &lt;div class="mirror"&gt;testing&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The only problem here is that the center of mirroring is not the center of the object, so maybe we need some javascript to move the object where we want it.</p>