Html 仅限CSS3的视差效果

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

注意：请不要建议任何JS解决方案和背景图像解决方案，因为我只尝试使用

CSS3

和

DIV

有谁能建议如何处理这个问题吗？这是你的电话号码

.image div{
宽度：100%；
浮动：左；
-webkit透视图：1px；
透视图：1px；
-webkit透视图来源：中间顶部；
透视原点：中上；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
位置：相对位置；
}
.影像组{
宽度：100%；
高度：自动；
}
.内容组{
宽度：100%；
背景：#fff；
浮动：左；
位置：相对位置；
-webkit转换：translateZ（0）；
变换：translateZ（0）；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。埃尼安·尤伊斯莫·比本杜姆·拉奥里特。孕期分娩
这是一个很好的例子。暂时性枕叶原发性脊髓炎。佩纳提布和马格尼斯社会
临产的蒙特斯，红毛猴。不动产酵素，不动产秃鹫，
在智人的身上长出一条龙

Lorem ipsum dolor sit amet，是一位杰出的献身者。埃尼安·尤伊斯莫·比本杜姆·拉奥里特。孕期分娩
这是一个很好的例子。暂时性枕叶原发性脊髓炎。佩纳提布和马格尼斯社会
临产的蒙特斯，红毛猴。不动产酵素，不动产秃鹫，
在智人的身上长出一条龙

Lorem ipsum dolor sit amet，是一位杰出的献身者。埃尼安·尤伊斯莫·比本杜姆·拉奥里特。孕期分娩
这是一个很好的例子。暂时性枕叶原发性脊髓炎。佩纳提布和马格尼斯社会
临产的蒙特斯，红毛猴。不动产酵素，不动产秃鹫，
智人的先天性先天性斜颈。

以下是我的逐步方法：

---

• 将内容包装到包装器元素中，例如使用此样式的

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

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

• 移除

  float

  并将

  content div

  和

  image div

  的位置从

  relative

  转到

  absolute

  。给内容留一些上边距（否则会与图像重叠），并用足够的内容填充页面以查看效果

• 对于较慢的层（图像），您需要使用适当的变换原点调整其

  translateZ

  和

  scale

  属性，因此添加此样式

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

  .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> );


Lorem ipsum dolor sit amet，是一位杰出的献身者。埃尼安·尤伊斯莫·比本杜姆·拉奥里特。孕期失业的妇女只能坐在床上。暂时性枕叶原发性脊髓炎。分裂的蒙特斯国家公园和马格尼斯公园。不动产酵素，不动产秃鹫，猫科动物，智人中的斜纹夜蛾

Lorem ipsum dolor sit amet，是一位杰出的献身者。埃尼安·尤伊斯莫·比本杜姆·拉奥里特。孕期失业的妇女只能坐在床上。暂时性枕叶原发性脊髓炎。分裂的蒙特斯国家公园和马格尼斯公园。不动产酵素，不动产秃鹫，猫科动物，智人中的龙舌兰。

Lorem ipsum dolor sit amet，是一位杰出的献身者。埃尼安·尤伊斯莫·比本杜姆·拉奥里特。孕期失业的妇女只能坐在床上。暂时性枕叶原发性脊髓炎。分裂的蒙特斯国家公园和马格尼斯公园。不动产酵素，不动产秃鹫，猫科动物，智人中的龙舌兰。

谢谢您的回答，在您的示例中有两个滚动条，必须重置正文滚动条？？