CSS3 3D转换在Chrome（Linux）中不起作用

您将需要Linux Chrome才能看到此内容。在我的开发站点spoilmebox.com（见底部的三个框），我的背面正在显示。我该如何解决？CSS3 3D转换在Chrome（Linux）中不起作用

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。

此代码的源代码是用HTML5 自适应网页设计和CSS3由Ben文思

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

来源

2013-03-21 Shane

从我所知道的情况来看，这是最近在Linux上构建Chrome的一个错误（我还没有在其他平台上测试过）;您会注意到现在每个其他使用相同CSS转换的网站在显示背面时都存在问题。我也注意到在我自己的网站上，视角不再被渲染。

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

来源

2013-05-03 15:46:57 David

我只是希望，当他们拿出这样的实验项目时，他们并不会根据用途来判断受欢迎程度。采用这样的功能很容易，但如果你知道它可以消失，就很难表现出兴趣。 – Shane 2013-05-05 17:21:06

CSS3 3D转换在Chrome（Linux）中不起作用

回答

相关问题