CSS3转换后的元素在firefox中不可见

Question

我想用CSS3创建一个透视网球场。它在Webkit中看起来很棒，但在Firefox中，法院本身并不可见。以下是相关代码：

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);
}

我想这与CSS3转换有关，但我没有看到问题......

它应该是这样的，但是在最新的Firefox中看不到整个法庭（<div class="court">）。

最后，这是演示：http://jsfiddle.net/Szgpy/

Answer 1

问题在于#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);

您需要将scale3d的第三个参数（“缩放矢量的z分量”）从0更改为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

我猜测当Firefox将Z轴缩放为零时，元素会变得扁平，以至于它不再存在，但Chrome会将元素视为完全平坦，同时仍然显示它。

即使z缩放为1，您的法庭仍然看起来相同，因为您正在转换的div是2D对象。它已经平坦了;你不需要再进一步压扁它。