transform-style：preserve3d在Firefox和IE中不起作用

Question

我正在使用transform-style: preserve3d来创建翻转动画。但是，这个动画在Chrome中只是三维的，而不是在Firefox或IE 10中。在这两个浏览器中它是平的。

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

问题

如何在Firefox和IE中进行旋转3d，而不仅仅是在Chrome？

Answer 1

添加px的

-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;