CSS3 3D转换在Chrome（Linux）中无法使用 [英] CSS3 3D Transformations not working in Chrome (Linux)

问题描述

您需要使用Linux Chrome才能看到这个。在我的开发者网站 spoilmebox.com （见底部的三个框）中，我的背面显示。如何解决此问题？

You will need Linux Chrome to see this. On my dev site spoilmebox.com (see three boxes on bottom), my backface is showing through. How do I fix this?

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），但我不相信这是乱七八糟的，因为它是

Notice I am using bootstrap (span4) but I don't believe this is messing up because it is working in Chrome (Windows) and Firefox.

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

The source for this code was Responsive Web Design with HTML5 and CSS3 by Ben Frain

我已经在这个网站上使用jQuery和JavaScript，所以没有寻找替代方案。

I am already using jQuery and JavaScript on this site, so not looking for an alternative. I want to support this new CSS3 technology if I can get it to play with most of the browsers.

推荐答案

这是从...开始的，我想要支持这个新的CSS3技术，如果我可以让它与大多数浏览器一起玩。我可以告诉，最近在Linux上构建的Chrome（我还没有在其他平台上测试）中的错误;你会注意到，使用相同的CSS变换的每个其他网站现在有一个问题与背面显示通过。我也注意到在我自己的网站上透视不再被渲染。

This is, from what I can tell, a bug in a recent build of Chrome on Linux (I haven't tested on other platforms yet); you will notice that every other site utilising the same CSS transformations now has a problem with the backface showing through. I've also noticed on my own site that perspective is no longer being rendered.

虽然讨厌，我们必须记住，前缀CSS功能仍然是实验性的，我们应该不能依靠他们保持稳定或甚至保持存在。

Whilst annoying, we must remember that prefixed CSS features are still experimental ones, and we shouldn't be relying on them to remain stable or even to remain present.

这篇关于CSS3 3D转换在Chrome（Linux）中无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！