html - 仅使用 CSS3 的视差效果

Question

我正在尝试仅使用 CSS3 创建视差效果，但不幸的是我做不到，简单的结构是一个带有图像的 div 和一个带有内容的 div，我不能在背景中使用图像。

注意:请不要建议任何 JS 解决方案和背景图片解决方案，因为我只是想用 CSS3 来处理它和 DIV 内的图像标签

谁能建议如何处理这个问题？这是 JSfiddle

.image-div{
        width: 100%; 
        float: left;
        -webkit-perspective: 1px;
        perspective: 1px;
        -webkit-perspective-origin: center top;
        perspective-origin: center top;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        position: relative;
    }
    .image-div img{
        width: 100%; 
        height: auto;
    }
    .content-div{
        width: 100%;
        background: #fff; 
        float: left;
        position: relative;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);

    }

<div class="image-div">
        <img src="https://pbs.twimg.com/media/B2XTRwtCAAEnqlP.jpg:large">
    </div>
    <div class="content-div">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet
            lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis
            parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci,
            sed rhoncus pronin sapien nunc accuan eget.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet
                lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis
                parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci,
                sed rhoncus pronin sapien nunc accuan eget.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet
                    lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis
                    parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci,
                    sed rhoncus pronin sapien nunc accuan eget.</p>        
    </div>

Answer 1

这是我的分步方法:

---

• 将您的内容包装到包装器元素中，例如<main>用这种风格

  main {
    position: relative;
    min-height: 100vh;
    perspective: 1px;
    transform-style: preserve-3d;
  }
  

• 删除 float并转动content-div的位置和 image-div来自 relative至 absolute .为内容提供一些上边距(否则它会与图像重叠)并用足够的内容填充页面以查看效果。

• 对于较慢的层(图像)，您需要调整其 translateZ和 scale具有适当 transform-origin 的属性, 所以加上这个样式

  .image-div{
     width: 100%; 
     position: absolute;
     height: 30vw;
     transform: translateZ(-1px) scale(2);
     transform-origin: 50vw 50vh;
  }
  

---

最后，您可以通过简单地更改 transform: translateZ(-1px) scale(2); 的值来降低图像层的速度。 , 因此您可以调整其深度。

一般公式为:

transform: translateZ(-<n> px) scale( <n+1> );

---

这是一个完整的例子

body, html { padding: 0; margin: 0; font: 1rem/1.5 Arial; }

main {
   height: 100vh;
    overflow-x: hidden;
    perspective: 1px;
    position: relative;
    transform-style: preserve-3d;
}

.image-div{
    width: 100%; 
    position: absolute;
    z-index: -1;
    height: 30vw;
    transform: translateZ(-2px) scale(3);
    transform-origin: 50vw 50vh;
}

.image-div img {
    width: 100%; 
    height: 100%;
}
 
.content-div{
    width: 100%;
    background: #fff; 
    position: absolute;
    z-index: 2;
    margin-top: 32vw;
}

<main>

   <div class="image-div">
      <img src="//via.placeholder.com/1920x600">
   </div>

   <div class="content-div">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>  
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>                  
    </div>      
 </main>

这里有一个 interactive demo我使用了一些好东西，比如 CSS 变量、平滑滚动和 aspect-ratio .