CSS3 翻转动画在 Firefox 中不保留 3D 旋转

Question

我已经设置了一个 FLIP 动画，它使用 CSS3 变换属性，使用过渡来创建一个面板，该面板在 Y 访问上翻转作为显示和隐藏效果。

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

过渡在 Chrome 和 Safari(即使用 -webkit-)中看起来很漂亮，但是在 -moz 上动画不是 3 维的。它仍然有效，但缺少可以在 -webkit- 上看到的 3 维翻转。缺少什么:

.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