Chrome CSS Perspective无法处理所有块

Question

我正在开发的网店上有一些奇怪的行为。 在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%;
}

您可以在http://www.fastermaster.at/konfigurator

看到实况页面

编辑：

我尝试在隐身模式下打开该页面，以便所有Chrome扩展程序都处于非活动状态，但结果仍然相同。

Answer 1

通常这样做跨浏览器转换

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

Answer 2

Chrome似乎有一个错误。我在10月中旬收到（自动）更新，重启后一切都很好。