CODEWITHSUNDEEP
javascripthtmlcss3d
vahidseo
vahidseo

Reputation: 461

Weird transform-style behavior in Firefox

I made this 3D model of a WWII plane. It's supposed to rotate, shoot and fly around.

3D WWII Plane

The problem is that Firefox doesn't render the plane like a 3D object, but Chrome does. Maybe the problem is my transform-style.

What do you think causes this problem? How do I fix it? And it's lagging a lot sometimes. How do I fix that?

Upvotes: 0

Views: 163

Answers (1)

King King
King King

Reputation: 63317

Well again the so called FireFox proves that it's a buggy browser (not mentioning the slow feature it has). Looks like the whole model .plane can't apply the transform-style:preserve-3d down to all its descendants, just direct children or maybe that rule is applied only to pseudo-elements (:before and :after). In this case the front fan (.body:after) is not applied by the preserve-3d transform-style set in the model .plane, you have to set that style right in the .body (which is the direct parent of the fan :after), then it works just fine, of course the rendering is slightly different, which is caused by 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.

Upvotes: 3

Related Questions