html - 转换样式 : preserve3d not working in Firefox and IE

Question

我正在使用 transform-style: preserve3d 来创建翻转动画。然而，这个动画在 Chrome 中只有 3 维，在 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

添加像素

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