Firefox中奇怪的转换风格行为

Question

我制作了一架二战飞机的三维模型。它应该旋转，射击和飞行。

3D二战飞机

问题是火狐并不像3D物体那样渲染飞机，但Chrome却是如此。也许问题是我的转变风格。

你认为是什么导致了这个问题？我该怎么解决呢？它有时会落后很多。我该怎么解决这个问题？

Answer 1

再一次，所谓的FireFox证明了它是一个错误的浏览器(没有提到它所具有的缓慢特性)。看起来整个模型.plane不能将transform-style:preserve-3d应用于所有的后代，只是直接子元素，或者该规则可能只应用于伪元素(:before和:after)。在这种情况下，前扇(.body:after)不是由模型.plane中的preserve-3d转换样式集应用的，您必须在.body中(它是扇扇:after的直接父级)中设置该样式，然后它工作得很好，当然呈现方式略有不同，这是由FireFox造成的)：

.plane > .body {
   /*...*/
   /* add this here */
   -moz-transform-style: preserve-3d;
   transform-style: preserve-3d;
}
/* do the same for other components having pseudo-elements */
.plane > .wings {
  /*...*/
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;      
} 
.plane > .ins {
  /*...*/
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;     
}   
.plane > .rear { 
  /*...*/
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;      
}

更新演示。