title: Flip horizontally html and css
body: <p>I am trying to implement a feature where I need to have two trees, one next to the other, looking like mirrors. Please, see the image:</p>
  
  <p><img src="https://i.stack.imgur.com/CY88A.png" alt="enter image description here"></p>
  
  <p>The point is I found the way to flip it horizontally but text is also inverted. What I cannot do is invert the tree letting the text as it is.</p>
  
  <p>Here is what I have done: <a href="http://jsfiddle.net/lontivero/R24mA/" rel="noreferrer">http://jsfiddle.net/lontivero/R24mA/</a></p>
  
  <p>Basically, the following class is applied to the html body: </p>
  
  <pre class="lang-css prettyprint-override"><code>.flip-horizontal {
      -moz-transform: scaleX(-1);
      -webkit-transform: scaleX(-1);
      -o-transform: scaleX(-1);
      transform: scaleX(-1);
      -ms-filter: fliph; /*IE*/
      filter: fliph; /*IE*/
  }
  </code></pre>
  
  <p>The HTML code: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body class="flip-horizontal"&gt;&lt;/body&gt;
  </code></pre>
  
  <p>And the JS:</p>
  
  <pre class="lang-js prettyprint-override"><code>Ext.create('Ext.grid.Panel', {
      title: 'Simpsons',
      height: 200,
      width: 400,
      // more and more code. SO forces me to paste js code ;(
      renderTo: Ext.getBody()
  });
  </code></pre>