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

Chrome CSS Perspective not working on all blocks

提问人:Bojan Hrnkas 提问时间:10/10/2014 最后编辑:Bojan Hrnkas 更新时间:11/18/2014 访问量:742

问:

我在我正在开发的网上商店有一些奇怪的行为。 在 Google Chrome 中,应该旋转的两个 div 之一保持平坦。另一个是正确旋转的。 在Firefox中一切正常。

知道可能出了什么问题吗?

以下是屏幕截图(左侧是Chrome,右侧是Firefox):

ChromeFirefox以下是相关的 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 扩展程序都处于非活动状态,但结果仍然相同。

HTML CSS 谷歌浏览器

评论

1赞 GramThanos 10/10/2014
在我的浏览器上还可以。
0赞 Bojan Hrnkas 10/13/2014
@ThanasisGrammatopoulos 您使用的是哪个 Chrome 版本?
0赞 Goos van den Bekerom 10/13/2014
在我的 chrome 中,它也显示错误,所以我现在会稍微研究一下;)
0赞 Goos van den Bekerom 10/13/2014
我注意到的第一件事是,当您检查显示选择的元素时,会正确旋转,这很奇怪
3赞 Bojan Hrnkas 10/13/2014
Chrome中似乎存在错误。我刚刚收到(自动)更新,重新启动后一切正常。新版本: 38.0.2125.101 m

答:

0赞 PauleHan 11/18/2014 #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 */
}
1赞 Bojan Hrnkas 11/18/2014 #2

Chrome中似乎存在错误。我在 10 月中旬收到了(自动)更新,重新启动后一切正常。