title: How to make a mirror of menu in CSS
body: <p>I am newbie in CSS coding. Is there any easy option in CSS to make "mirror" of menu which is constructed like below. I would like to get exactly the same menu but in mirror.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="nav"&gt;
  &lt;li class="blue"&gt;&lt;a href="/index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li class="red"&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li class="green"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>.navbox {
      float: left;
      position: relative;
  }
  ul.nav {
      background: url("shadow.png") no-repeat scroll 0 0 transparent;
      display: block;
      left: 0;
      list-style: none outside none;
      padding: 60px 0;
      position: relative;
      top: 0;
      width: 200px;
  }
  .nav li a {
      color: white;
      display: block;
      font-size: 14px;
      margin: 5px 0 0;
      padding: 7px 15px;
      text-decoration: none;
      width: 100px;
  }
  .nav li a:hover {background: url("border.png") no-repeat scroll 0 0 black;
  color: white;
  padding: 7px 15px 7px 30px;}
  .blue a { background: url("border.png") no-repeat scroll 0 0 blue;}
  .red a { background: url("border.png") no-repeat scroll 0 0 red;}
  .green a {background: url("border.png") no-repeat scroll 0 0 green;}
  </code></pre>
  
  <hr>
  
  <p>Hello again and thanks for the answers.</p>
  
  <p>It almost solves my problem:</p>
  
  <pre><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>
  
  <p>But, is there any option which could avoid "mirroring" of the text? I mean:</p>
  
  <pre><code>&lt;li class="red"&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li class="green"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>That text stay without "mirroring"?</p>