html - transform-style: preserve3d が Firefox および IE で機能しない

Question

transform-style: preserve3dフリップアニメーションを作成するために使用しています。ただし、このアニメーションは Chrome でのみ 3 次元であり、Firefox や IE 10 では表示されません。これら 2 つのブラウザーではフラットです。

jsFiddle: http://jsfiddle.net/ZQf9j/

HTML

<ul>
    <li>TEST</li>
</ul>

CSS

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;
}

質問

Chrome だけでなく、Firefox や IE で回転を 3D にするにはどうすればよいですか?