6

我想使用 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 转换有关，但我没有看到问题......

这是它应该看起来的样子，但整个球场 ( <div class="court">) 在最新的 Firefox 中是不可见的。

在 Firefox 中应该是这样的

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

4

1 回答 1

5

问题在于这些规则#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);

固定 jsFiddle 演示

我猜想当 Firefox 将 Z 轴缩放为零时，该元素被扁平化到不再存在，但 Chrome 将元素视为完全扁平化，同时仍然显示它。

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

于 2013-06-03T15:37:48.270 回答