CSS3 converted element not showing in firefox

Question

I want to create a promising tennis court using CSS3. It looks great in Webkit, but in Firefox the trial itself is not visible. Here is the relevant code:

HTML:

<div id="court-color"> <div class="court_outer"> <div class="court"></div> </div> </div> 

CSS

 #court-color .court_outer { position: relative; width: 514px; height: 382px; background-color: #82b192; -webkit-perspective: 474px; -moz-perspective: 474px; -o-perspective: 474px; -ms-perspective: 474px; perspective: 474px; -webkit-perspective-origin: 50%, 50%; -moz-perspective-origin: 50%, 50%; -o-perspective-origin: 50%, 50%; -ms-perspective-origin: 50%, 50%; overflow: hidden; } #court-color .court { background-color: #4275b3; width: 36em; height: 78em; font-size: 10px; border: 0.5em solid #fff; position: absolute; left: 50%; top: 50%; margin: -39.5em -18.5em; -webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); -moz-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); -o-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); -ms-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); } 

I assume this has something to do with CSS3 conversion, but I don't see a problem ...

Here's what it should look like, but the entire court ( <div class="court"> ) does not appear in the latest Firefox.

And finally, here is a demo: http://jsfiddle.net/Szgpy/

Answer 1

The problem with these rules for #court-color .court :

 -webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); -moz-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); -o-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); -ms-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); 

You need to change the third parameter scale3d ("z-component of the scaling vector") from 0 to 1 :

 -webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 1) translate(0px, -6em); -moz-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 1) translate(0px, -6em); -o-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 1) translate(0px, -6em); -ms-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 1) translate(0px, -6em); transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 1) translate(0px, -6em); 

fixed jsFiddle demo

I assume that when Firefox scales the Z axis to zero, the element is smoothed so much that it no longer exists, but Chrome treats the element as completely flat, preserving it.

Your court will look the same even when z-scaling is 1 , because the div transform is a 2D object. It is already flat; you no longer need to smooth it.