Html Chrome CSS透视图不适用于所有块

在我正在开发的一家网店上，我有一些奇怪的行为。 在Google Chrome中，两个应该旋转的div中的一个保持平坦。另一个正确旋转。 在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%;
}

只是一些文字
.肖像#正面{
右：7；
}
.肖像#背面，.肖像#正面{
位置：绝对位置；
宽度：132px；
高度：214px；
}
#正面{
变换：旋转（7度）；
-webkit变换：旋转（7度）；
-ms变换：旋转（7度）；
}
html，body，div，span，applet，object，iframe，h1，h2，h3，h4，h5，h6，p，blockquote，pre，a，abbr，缩写词，地址，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，dd，ol，ul，li，fieldset，form，label，label，table，table，table，table，caption，tbody，tfoot，thead，tr，th，th，th，the，the，the，the，of，旁白、画布、细节、嵌入、图形、figcaption、页脚、页眉、hgroup、菜单、导航、输出、红宝石、部分、摘要、时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
文字装饰：无；
}
用户代理样式表div{
显示：块；
}
继承自div#live-preview.live-preview.grait
样式属性{
颜色：rgb（192192192）；
字体系列：helvetica；
}
.现场预览{
字体家族：时代；
位置：相对位置；
左边距：自动；
右边距：自动；
边缘顶部：30px；
边缘底部：30px；
透视图：252px；
-webkit透视图：252px；
-ms透视图：252px；
透视来源：50%-68%；
-webkit-perspective-origin-x:50%；
-webkit-perspective-origin-y:-68%；
-ms-perspective-origin-x:50%；
-ms-perspective-origin-y:-68%；
}

您可以在以下位置查看live页面：

编辑：

---

我尝试以匿名模式打开页面，这样所有的Chrome扩展都处于非活动状态，但结果仍然是一样的。

通常会跨浏览器打开

#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 */
}

---

Chrome中似乎有一个bug。我在10月中旬收到了（自动）更新，重新启动后一切正常。

在我的浏览器上一切正常。@ThanasisGrammatopoulos您使用的是什么Chrome版本？在我的Chrome中，它也显示错误，所以我现在会仔细查看；）我注意到的第一件事是，当你检查元素时，选择被正确地旋转显示，这很奇怪，Chrome中似乎有一个bug。我刚收到（自动）更新，重启后一切都很好。新版本：38.0.2125.101 m