Chrome CSS Perspective does not work with all blocks

Question

I have strange behavior in the online store that I am developing. In Google Chrome, one of the two sections that you need to rotate remains flat. The other is rotated correctly. Everything works fine in Firefox.

Any idea what could be wrong?

Here are the screenshots (Chrome on the left and Firefox on the right):

Here is the corresponding Html and Css code:

<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%;
}

You can see the live page at http://www.fastermaster.at/konfigurator

EDIT:

I tried to open the page in incognito mode, so that all Chrome extensions are inactive, but the result is the same.

Answer 1

This is usually a cross-browser conversion

#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 . () .