Question

您需要Linux Chrome才能看到这一点。在我的开发网站spoilmebox.com上（见底部的三个方框），我的背面正在显示。我该如何解决这个问题？

... CSS

.Qcontainer {
position: relative;
-webkit-perspective: 800;
-moz-perspective: 800;
perspective: 800;
background: none;
}
.pumpkinhead {
width:100%;
height:15em;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
-moz-transform-style: preserve-3d;
-moz-transition: 1s;
transform-style: preserve-3d;
transition: 1s;
}
.Qcontainer:hover .pumpkinhead {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 5;
}
.back {
width: 66%;
height:127%;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #000000;
background: -webkit-linear-gradient(top,
rgba(0,0,0,0.65)0%,
rgba(0,0,0,0)100%);
z-index: 4;
padding: 15%;
}

HTML ...

<div class="row-fluid">
            <div class="span4 Qcontainer">
                <div class="pumpkinhead">
                    <div class="face front">
                        <h2 class="g2-unit-header">...</h2>
                        <p style="min-height: 240px;">...</p>
                        <p><a href="#" class="btn btn-info">...</a></p>
                    </div>
                    <div class="face back">
                        <p>this is my back fool!</p>
                    </div>
                </div>
            </div>
</div>

注意我正在使用bootstrap（span4），但我不相信这会搞乱，因为它在Chrome（Windows）和Firefox中运行。

此代码的来源是 响应式网页设计，HTML5和CSS3 by Ben Frain

我已经在这个网站上使用jQuery和JavaScript，所以不要寻找替代方案。如果我可以使用大多数浏览器，我想支持这种新的CSS3技术。

Answer 1

据我所知，这是Linux上最近构建的Chrome中的一个错误（我尚未在其他平台上测试过）;您会注意到，现在使用相同CSS转换的每个其他站点都会出现背面显示问题。我也注意到在我自己的网站上不再渲染透视图。

虽然很烦人，但我们必须记住，前缀CSS功能仍然是实验性的，我们不应该依赖它们来保持稳定甚至保持存在。

CSS3 3D转换无法在Chrome（Linux）中运行

1 个答案: