3D元素在Firefox

不工作我試圖轉動2周的div像這樣http://jsfiddle.net/4mFLL/3D元素在Firefox

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
.psd { 
    position: absolute; 
    height: 0px; 
    width: 400px; 
    perspective: 700px; 
    -webkit-perspective: 700px; 
    -moz-transform: perspective(700px); 
} 

.foo { 
    position: absolute; 
    display: table; 
    height: 50px; 
    width: 100%; 
    background: #F00; 
    transform-style: preserve-3d; 
    transform-origin: top; 
    transform: rotateX(-20deg); 
    -webkit-transform-style: preserve-3d; 
    -webkit-transform-origin: top; 
    -webkit-transform: rotateX(-20deg); 
    -moz-transform-style: preserve-3d; 
    -moz-transform-origin: top; 
    -moz-transform: rotateX(-20deg); 
} 
     </style> 
    </head> 
    <body> 
     <div style="position: fixed;"> 
      <div class="psd"> 
       <div class="foo"> 
        <p>Text 1</p> 
        <div class="foo"> 
         <p>Text 2</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

它是工作在Chrome，但不能在Firefox。 firefox不支持這些旋轉類型還是我錯過了一個CSS屬性？

布斯蒂

來源

2013-10-22 Busti

這樣通常錯誤是由於這樣的事實，一些正在使用的屬性是實驗語法錯誤。最好的開始是驗證語法是否100％正確。 – jbenjohnson

變化包含.foo風格：

.foo { 
    display: block; 
    }

來源

2013-10-22 14:31:56 LorDex

3D元素在Firefox

回答

相關問題