Question

我正在尝试使用纯css和其下方的一些居中内容来实现视差效果。为此，我在CSS3中使用了-webkit-perspective（透视）规则，并结合-webkit-transform（变换）来获得正确的效果。视差本身效果很好，但我无法将内容置于height: 100vh; / width 100%视差标题下。

让我展示一下我所拥有的：http://aukehuys.com/insight/

我使用了sam beckham的方法 - 这是codepen：http://codepen.io/samdbeckham/full/OPXPNp

如您所见，我的占位符内容未居中。一开始我以为我可以简单地使用bootstrap框架来集中容器，但它不起作用。在意识到透视规则如何工作之后，这种行为非常符合逻辑。好吧，让我们从视差div中断开parallax__cover div的边距值为top: 100%，但这也不起作用。我可以使用什么方法来修复内容？

以下是一些代码段，如果您不想深入我的hmtl / css：

HTML：

   <div class="parallax">
<div class="parallax__layer parallax__layer__0"> <img src="img/parallax/2/1.png"> </div>
<div class="parallax__layer parallax__layer__1"> <img src="img/parallax/2/2.png"> </div>
<div class="parallax__layer__title parallax__layer__2"> <img src="img/parallax/2/title.png"></div>
<div class="parallax__layer parallax__layer__3"> <img src="img/parallax/2/3.png"> </div>
<div class="parallax__layer parallax__layer__4"> <img src="img/parallax/2/4.png"> </div>
<div class="parallax__layer parallax__layer__5"> <img src="img/parallax/2/5.png"> </div>
<div class="parallax__layer parallax__layer__6"> <img src="img/parallax/2/6.png"> </div>
<div class="parallax__layer parallax__layer__7"> <img src="img/parallax/2/7.png"> </div>
<div class="parallax__cover">
    <div class="container">
        <section class="first-section">
            <div class="row">
                <div class='col-sm-6'> somem magical content </div>
                <div class='col-sm-6'> somem magical content </div>
    </div>
    </section>
</div>

..和CSS：

.parallax {
-webkit-perspective: 100px;
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
margin-left: -1500px;}

.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;}

.parallax__cover {
background: #2D112B;
position: absolute;
top: 100%;
left: 50%;
right: 0;
bottom: 0;
margin-left: -1500px;
height: 2000px;
z-index: 2;}

.parallax__layer__0 {
-webkit-transform: translateZ(-300px) scale(4);
transform: translateZ(-300px) scale(4);}

.parallax__layer__1 {
-webkit-transform: translateZ(-250px) scale(3.5);
transform: translateZ(-250px) scale(3.5);}

.parallax__layer__2 {
and so on;}

如果您需要更多信息，请与我们联系。

谢谢！

-webkit-perspective - 中心内容

0 个答案: