我正在按照 Keith Clark's 编写纯 CSS3 视差网页方法和 Carl Henderson 制作的示例(由于缺乏声誉,无法链接他的代码笔)。 这是主页中的代码,我的 JSFiddle和 Carl 的代码笔。
index.html
<div class="plax_layer plax_layer--back">
<p>Back Layer</p>
</div>
<div class="plax_layer plax_layer--base">
<p>Base Layer</p>
</div>
<div class="plax_layer plax_layer--deep">
<p>Deep Layer</p>
</div>
</div>
main.css
html, body {
height: 100%;
overflow: hidden;
}
.parallax {
top: 0;
-webkit-perspective: 1px;
-moz-perspective: 1px;
-ms-perspective: 1px;
perspective: 1px;
height: 100vh;
overflow-x: hidden;
}
.plax_layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-size: 200%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.plax_layer--base {
-webkit-transform: translatez(0) scale(1);
-moz-transform: translatez(0) scale(1);
-ms-transform: translatez(0) scale(1);
-o-transform: translatez(0) scale(1);
transform: translatez(0) scale(1);
border: 2px solid red;
}
.plax_layer--back {
-webkit-transform: translatez(-1px) scale(2);
-moz-transform: translatez(-1px) scale(2);
-ms-transform: translatez(-1px) scale(2);
-o-transform: translatez(-1px) scale(2);
transform: translatez(-1px) scale(2);
border: 2px solid blue;
}
.plax_layer--deep {
-webkit-transform: translatez(-2px) scale(3);
-moz-transform: translatez(-2px) scale(3);
-ms-transform: translatez(-2px) scale(3);
-o-transform: translatez(-2px) scale(3);
transform: translatez(-2px) scale(3);
border: 2px solid green;
}
p {
position: absolute;
}
我遇到的问题是代码在 Chrome 和 Safari 上运行良好,但 Mozilla 完全无法在不打开检查器窗口的情况下产生效果(在关闭所述窗口后停止)并且只有在我调整大小后才能在我的 fiddle 中运行输出窗口。我在谷歌上没有遇到过类似的问题(也许还没有)。
最佳答案
我可以通过在正文中添加 margin: 0
来修复。
在这里查看:http://codepen.io/lonekorean/pen/0e625cea8f2da7e046ea2b3b9a33c9cc .
关于html - 在 Mozilla 上调整窗口大小后,CSS3 转换开始工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38897603/