title: Flip CSS Transition showing back flip text reversed
body: <p>I am using the following CSS to make a flipping transition with CSS3:</p>
  
  <pre><code>/* simple */
      .flip-container {
          -webkit-perspective: 1000;
          -moz-perspective: 1000;
          perspective: 1000;
                     -webkit-box-shadow: 1px 1px 1px 1px #ccc;  
                     -moz-box-shadow: 1px 1px 1px 1px #ccc;  
                      box-shadow: 1px 1px 1px 1px #ccc;  
          border: 1px solid #fff;
  
  
      }
  
          .flip-container:hover .flipper, .flip-container.hover .flipper {
              -webkit-transform: rotateY(180deg);
              -moz-transform: rotateY(180deg);
              transform: rotateY(180deg);
          }
  
      .flip-container, .front, .back {
           width: 160px;
           height: 160px;
      }
  
      .flipper {
          -webkit-transition: 0.6s;
          -webkit-transform-style: preserve-3d;
  
          -moz-transition: 0.6s;
          -moz-transform-style: preserve-3d;
  
          transition: 0.6s;
          transform-style: preserve-3d;
  
          position: relative;
      }
  
      .front, .back {
          -webkit-backface-visibility: hidden;
          -moz-backface-visibility: hidden;
          backface-visibility: hidden;
  
          position: absolute;
          top: 0;
          left: 0;
      }
  
      .front {
  
  z-index: 2;
  text-align: center;
      }
  
      .back {
  
          -webkit-transform: rotateY(180deg);
          -moz-transform: rotateY(180deg);
          transform: rotateY(180deg);
      }
  
      .front .name {
          font-size: 2em;
          display: inline-block;
          background: rgba(33, 33, 33, 0.9);
          color: #f8f8f8;
          font-family: Courier;
          padding: 5px 10px;
          border-radius: 5px;
          bottom: 60px;
          left: 25%;
          position: absolute;
          text-shadow: 0.1em 0.1em 0.05em #333;
  
          -webkit-transform: rotate(-20deg);
          -moz-transform: rotate(-20deg);
          transform: rotate(-20deg);
      }
  
      .back-logo {
          position: absolute;
          top: 40px;
          left: 90px;
          width: 160px;
          height: 117px;
          background: url(logo.png) 0 0 no-repeat;
      }
  
      .back-title {
          font-weight: bold;
          color: #00304a;
          position: absolute;
          top: 180px;
          left: 0;
          right: 0;
          text-align: center;
          text-shadow: 0.1em 0.1em 0.05em #acd7e5;
          font-family: Courier;
          font-size: 2em;
      }
  
      .back p {
          position: absolute;
          bottom: 40px;
          left: 0;
          right: 0;
          text-align: center;
          padding: 0 20px;
      }
  </code></pre>
  
  <p>Implementation of the CSS is as follows:</p>
  
  <pre><code> &lt;div class="sidepanel" id="troll"&gt;
      &lt;div class="flip-container" ontouchstart="this.classList.toggle('hover');"&gt;
      &lt;div class="flipper"&gt;
      &lt;a href="../articlenew/troll.php?id=&lt;?php echo rand(1,$maxnum);?&gt;"&gt;&lt;div class="front" &gt;
       &lt;span style="font-size: 26px; color:#333;"&gt;The Best Thing in this World is&lt;/span&gt;&lt;br /&gt;
          &lt;strong style="font-size: 40px; color:red;"&gt;SE...&lt;/strong&gt;&lt;/div&gt;&lt;/a&gt;
  
  &lt;a href="../articlenew/troll.php?id=&lt;?php echo rand(1,$maxnum);?&gt;"&gt;&lt;div class="back" style="text-align:center; color:#333;"&gt;
    &lt;!-- back content --&gt;
      &lt;span style="font-size: 30px"&gt;Secrets!&lt;/span&gt;
      &lt;img src="../trial/youmad.png" width="70" height="70" /&gt;&lt;br /&gt;
      &lt;span style="font-size: 20px"&gt;You Mad?&lt;/span&gt;&lt;br /&gt;
      &lt;span style="font-size: 16px"&gt;Best College Trolls&lt;/span&gt; &lt;/div&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>THe problem is that in some browsers it works fine, in some, i see the front text as well as the back text reversed, like when one sees a text in mirror. I have no clue where its messing up. I did gave browser version and compatibility a thought but i think HTML5 and CSS3 are enough popular now and all browsers support them. I am also sharing some images to explain:</p>
  
  <p><img src="https://i.stack.imgur.com/JZ2vP.png" alt="Chrome on Mac OS Version 29.0.1547.76"></p>
  
  <p><img src="https://i.stack.imgur.com/nUTxe.png" alt="Safari on Mac OS Version 5.1.7 (7534.57.4)"></p>