铬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透视不能在所有块

回答

相关问题