javascript - Firefox 中奇怪的转换样式行为

Question

我制作了这个二战飞机的 3D 模型。它应该旋转、射击和飞来飞去。

3D WWII Plane

问题是 Firefox 无法将平面渲染为 3D 对象，但 Chrome 可以。也许问题出在我的转换风格上。

您认为是什么导致了这个问题？我如何解决它？有时它会滞后很多。我该如何解决？

Answer 1

又一次，所谓的 FireFox 证明它是一个有缺陷的浏览器(更不用说它的慢速功能了)。看起来整个模型 .plane 无法将 transform-style:preserve-3d 应用到它的所有后代，只是直接子代或者该规则可能仅适用于伪元素(:before 和 :after)。在这种情况下，模型 .plane 中设置的 preserve-3d 变换样式未应用前扇 (.body:after) ，你必须在 .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;      
}

Updated demo .