仅具有CSS3的视差效果
仅具有CSS3的视差效果
提问于 2018-05-28 17:56:13
我试图用CSS3创建视差效果，但不幸的是我不能，简单的结构是一个带有图像的div和一个带有内容的div，我不能在背景中使用图像。
注意：请不要建议任何JS解决方案和背景图像解决方案，因为我只是尝试在DIV中使用CSS3和图像标签来处理它
有没有人能建议一下如何处理这个问题？这是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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-28 18:08:54
下面是我的循序渐进的方法：
- 将您的内容包装到包装元素中，例如具有此样式的
<main>
主{位置:相对；最小高度: 100vh；透视: 1px；变换样式:保留-3D；}
- 删除
float，并将content-div和image-div的位置从relative改为absolute。给内容留出一些上边距(否则会与图像重叠)，并用足够的内容填充页面以查看效果。
- 到较慢的图层(图像)您需要使用适当的
transform-origin调整其translateZ和scale属性，因此添加此样式
..image div{宽度: 100%；位置:绝对；高度: 30vw；变换: translateZ(-1px)比例(2)；变换原点: 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>
这是我用CSS变量，平滑滚动和aspect-ratio等好东西做的interactive demo。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50563676
复制相关文章
相似问题