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

我使用transform-style: preserve3d來創建翻頁動畫。但是，此動畫在Chrome中僅爲3維，而不是Firefox或IE 10。在這兩種瀏覽器中，它是平坦的。transform-style：preserve3d在Firefox和IE中不起作用

的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？

來源

2013-06-30 bytecode77

添加PX的

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

來源

2013-06-30 11:51:27 koningdavid

這也是必要的顯示類型改變爲塊類型（'在相同的定位特性直列block'結果），則[不會與在Firefox表類型工作] （https://bugzilla.mozilla.org/show_bug.cgi?id=726601）。 – ndm

但是當我使用'inline-block'時，包含文本的對齊方式不起作用。看到我以前的問題在這裏：http://stackoverflow.com/questions/17384875/vertical-align-of-element-not-working - 有沒有辦法使兩個工作？ – bytecode77

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

回答

相關問題