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）中不起作用

回答

相關問題