1

您将需要 Linux Chrome 才能看到这一点。在我的开发网站spokemebox.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>

请注意，我正在使用引导程序（span4），但我不认为这会搞砸，因为它在 Chrome（Windows）和 Firefox 中工作。

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

我已经在这个站点上使用 jQuery 和 JavaScript，所以没有寻找替代方案。如果我可以让它与大多数浏览器一起使用，我想支持这种新的 CSS3 技术。

4

1 回答 1

0

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

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

于 2013-05-03T15:46:57.647 回答