title: transform-style: preserve3d not working in Firefox and IE
body: <p>I am using <code>transform-style: preserve3d</code> in order to create a flip animation. However, this animation is only 3-dimensional in Chrome, not in Firefox or IE 10. In these two browsers it's flat.</p>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/ZQf9j/" rel="nofollow">http://jsfiddle.net/ZQf9j/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;TEST&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>ul
  {
      -webkit-perspective: 600;
      -webkit-transform-origin: 50% 50%;
      -moz-perspective: 600;
      -moz-transform-origin: 50% 50%;
  }
  ul li
  {
      display: inline-table;
      width: 100px;
      height: 100px;
      margin: 5px;
      border: 1px solid black;
      -webkit-transform: rotateY(45deg);
      -webkit-transition: all 500ms;
      -moz-transform: rotateY(45deg);
      -moz-transition: all 500ms;
  }
  </code></pre>
  
  <p><strong>Question</strong></p>
  
  <p>How can I make the rotation 3d in Firefox and IE, not only in Chrome?</p>