Question

我正在按照Keith Clark's方法编写一个纯CSS3视差网页和Carl Henderson制作的样本（由于缺乏声誉而无法链接他的codepen）。这是主页中的代码，我的JSFiddle和Carl的Codepen。

的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完全无法在不打开Inspector窗口的情况下提供效果（在关闭所述窗口后停止）并且仅在我调整大小后才能在我的小提琴中工作输出窗口。我没有在谷歌上遇到类似的问题（可能还没有）。

Answer 1

我能够通过向身体添加margin: 0来解决问题。

请在此处查看：http://codepen.io/lonekorean/pen/0e625cea8f2da7e046ea2b3b9a33c9cc。

在Mozilla上调整窗口大小后，CSS3 Transform开始工作

1 个答案: