鉻CSS透視不能在所有塊

我在我正在開發的網上商店有一些奇怪的行爲。在谷歌瀏覽器中，應該旋轉的兩個div中的一個保持不變。另一個是正確旋轉。在Firefox中一切正常。鉻CSS透視不能在所有塊

任何想法可能是錯誤的？

下面是截圖（Chrome的左側和Firefox在右邊）：

Chrome Firefox 下面是相關的HTML和CSS代碼：

<div id="live-preview" class="live-preview portrait" style="color: rgb(192, 192, 192); font-family: helvetica;"> 
    <div class="bg-image" id="back" style="background-image: url(http://www.fastermaster.at//templates/diplombinderei.at/images/material/0.jpg);"> 
     <div class="bg-color" id="back-bg" style="background: rgba(0, 0, 0, 0.498039);"> 
     </div> 
    </div> 
    <div class="bg-image" id="spine" style="background-image: url(http://www.fastermaster.at//templates/diplombinderei.at/images/material/0.jpg);"> 
     <div class="bg-color" id="spine-bg" style="background: rgba(0, 0, 0, 0.498039);"> 
      <span class="first-line"></span> 
      <span class="second-line"></span> 
     </div> 
    </div> 
    <div class="bg-image" id="front" style="background-image: url(http://www.fastermaster.at//templates/diplombinderei.at/images/material/0.jpg);"> 
     <div class="bg-color" id="front-bg" style="background: rgba(0, 0, 0, 0.498039);"> 
      <span class="first-line typo-big typo-center">Just SomeText</span> 
      <span class="second-line"></span> 
      <span class="third-line"></span> 
     </div> 
    </div> 
</div> 

.portrait #front { 
right: 7; 
} 
.portrait #back, .portrait #front { 
position: absolute; 
width: 132px; 
height: 214px; 
} 
#front { 
transform: rotateY(7deg); 
-webkit-transform: rotateY(7deg); 
-ms-transform: rotateY(7deg); 
} 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
margin: 0; 
padding: 0; 
border: 0; 
font-size: 100%; 
font: inherit; 
vertical-align: baseline; 
text-decoration: none; 
} 
user agent stylesheetdiv { 
display: block; 
} 
Inherited from div#live-preview.live-preview.portrait 
Style Attribute { 
color: rgb(192, 192, 192); 
font-family: helvetica; 
} 
.live-preview { 
font-family: Times; 
position: relative; 
margin-left: auto; 
margin-right: auto; 
margin-top: 30px; 
margin-bottom: 30px; 
perspective: 252px; 
-webkit-perspective: 252px; 
-ms-perspective: 252px; 
perspective-origin: 50% -68%; 
-webkit-perspective-origin-x: 50%; 
-webkit-perspective-origin-y: -68%; 
-ms-perspective-origin-x: 50%; 
-ms-perspective-origin-y: -68%; 
}

你可以看到在直播頁面http://www.fastermaster.at/konfigurator

編輯：

我試圖在打開的頁面認知模式，以便所有Chrome擴展程序都處於不活動狀態，但結果仍然相同。

來源

2014-10-10 Bojan Hrnkas

它在我的瀏覽器上正常工作。 – GramThanos 2014-10-10 15:37:01

@ThanasisGrammatopoulos 您使用的是什麼Chrome版本？ – 2014-10-13 09:04:38

在我的鉻它也顯示錯誤，所以我現在看看它有點;） – 2014-10-13 09:25:28

通常這樣做跨瀏覽器的轉換

#front { 
    transform: rotate(15deg); 
    -moz-transform: rotate(15deg); /* For Firefox */ 
    -ms-transform: rotate(15deg); /* For IE */ 
    -webkit-transform: rotate(15deg); /* For Safari, Chrome, iOS */ 
    -o-transform: rotate(15deg); /* For Opera */ 
}

來源

2014-11-17 22:41:36 PauleHan

不確定你是否看過這個問題。 – 2014-11-18 23:02:29

似乎有在瀏覽器的錯誤。 10月中旬我收到（自動）更新，重啓後一切正常。

來源

2014-11-18 07:36:52

鉻CSS透視不能在所有塊

回答

相關問題