linux - CSS3 3D 转换在 Chrome (Linux) 中不起作用

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 中运行。

此代码的来源是 Ben Frain 的 Responsive Web Design with HTML5 and CSS3

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

Answer 1

据我所知，这是最近在 Linux 上构建的 Chrome 中的一个错误(我还没有在其他平台上测试过)；您会注意到使用相同 CSS 转换的所有其他站点现在都存在背面显示的问题。我还注意到在我自己的网站上不再呈现透视图。

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