CSS3 transformed element not visible in firefox

Question

I want to create a perspective tennis court using CSS3. It looks great in Webkit, but in Firefox, the court 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 guess it has something to do with the CSS3 transformation, but I don't see the problem...

This is what it should look like, but the whole court (<div class="court">) is not visible in the latest Firefox.

And lastly, here is the demo: http://jsfiddle.net/Szgpy/

Answer 1

The problem is in 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 of scale3d ("the 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'm guessing that when Firefox scales the Z-axis to zero, the element is flattened so much that it doesn't exist any more, but Chrome treats the element as perfectly flat while still displaying it.

Your court will still look the same even when the z-scaling is 1, because the div you're transforming is a 2D object. It's already flat; you don't need to flatten it any further.