CSS3翻轉動畫不會保留在Firefox中的3D旋轉

Question

我已經設置了一個翻轉動畫，該翻轉動畫使用CSS3轉換屬性使用轉換創建一個面板，作爲顯示和隱藏效果在Y訪問上翻轉。

例 http://jsfiddle.net/L9wDd/84/

過渡看起來beauutiful在Chrome和Safari（即與-webkit-）然而上-moz它動畫不是3維的。它仍然有效，但缺乏可在-webkit上看到的三維翻轉。缺少的內容：

.container { 
    position:relative; display:block; 
    -webkit-perspective:1000; -moz-perspective:1000; perspective:1000; 
} 
.panel { 
    margin:50px 100px 50px 100px; position:absolute; top:0; left:0; width:300px; height:300px; background:blue; border:5px solid rgba(0,0,0,0.3); border-radius:20px; padding:20px; color:#FFF; box-shadow:0 0 20px rgba(0,0,0,0.3); display:block; z-index:1; opacity:0; 
    -webkit-transition:all 1.2s; -moz-transition:all 1.2s; 
    -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; 
    -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); 
} 
.panel.shown { 
    opacity:1; z-index:2; 
    -webkit-transform:rotateY(0deg); -moz-transform:rotateY(0deg); 
} 
.panel.seen { 
    opacity:0; z-index:1; 
    -webkit-transform:rotateY(-180deg); -moz-transform:rotateY(-180deg); 
} 

Answer 1

轉換的3D國家依賴於CSS3屬性的角度。該屬性目前僅在-webkit中受支持。

http://www.w3schools.com/cssref/css3_pr_perspective.asp