title: 3d diagonal flip is not working
body: <p>I have a page with a bunch of boxes on it. There are four types of box. I want 4 different css3 transitions.</p>
  
  <p>Box 1 - flip on Y axis on hover &lt;- this works flawlessly<br/>
  Box 2 - flip on X axis on hover &lt;- this works flawlessly<br>
  Box 3 - fade effect on hover &lt;- this works flawlessly<br>
  Box 4 - flip on X &amp; Y axis diagonally on hover &lt;- this sorta works at first and then doesn't</p>
  
  <p>Each box has the same mark-up:</p>
  
  <pre><code>&lt;div class="box box-4"&gt;
      &lt;div class="inner-container"&gt;
          &lt;div class="front"&gt;&lt;img src="some_pic.jpg"&gt;&lt;/div&gt;
          &lt;div class="back"&gt;
              &lt;div class="tools"&gt;&lt;!-- some links and stuff --&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So when box-4 starts out, it looks perfect, the front is the right way up, the back is hidden, as it should be. When you hover on it, the animation starts out right, it flips on a diagonal axis (top-left corner to bottom-right corner), but then when the animation ends, the front (which should be visible behind the back but reversed) is perpendicular to the back! </p>
  
  <p><img src="https://i.stack.imgur.com/TVSWu.png" alt="enter image description here"></p>
  
  <p>I've tweaked the CSS values in all imaginable ways, I've looked at a ton of demos, what is wrong?!</p>
  
  <p>CSS:</p>
  
  <pre><code>.box-4 { -webkit-perspective:1200px; }
  .box-4 .inner-container { 
         width:100%; height:100%; position:relative; 
         -webkit-ransition:all 0.4s ease-in-out; 
         -webkit-transform-style:preserve-3d; 
  }
  .box-4 .back { 
      width:100%; height:100%; position:absolute; top:0; left:0; 
      background-color:rgba(0,0,0,.6); 
      -webkit-backface-visibility:hidden; 
      -webkit-transform-style:preserve-3d; 
   }
  .box-4:hover .inner-container { -webkit-transform:rotate3d(45,45,0,180deg); }
  .box-4 .back { -webkit-transform:rotate3d(45,45,0,-180deg); }
  </code></pre>
  
  <p>Note: I'm showing just the -webkit- styles here for simplicity, but in my actual CSS I have -moz-, -o-, -ms- and the regular un-prefixed variants as well...</p>