html - 转换样式：preserve3d 在 Firefox 和 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

添加 px

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