我正在尝试制作一个包含简单的纯CSS视差部分的页面。我将perspective
应用于body
元素,并将preserve-3d
应用于section容器,但是背景图像的滚动速度并不是很慢,它们只是正常滚动。
HTML:
<div class="p-section">
<div class="content"></div>
<div class="bg"></div>
</div>
<div class="p-section">
<div class="content"></div>
<div class="bg"></div>
</div>
<div class="p-section">
<div class="content"></div>
<div class="bg"></div>
</div>
CSS:
body {
width: 100vw;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
perspective: 10px;
}
.p-section {
transform-style: preserve-3d;
height: 100vh;
position: relative;
}
.content,
.bg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.bg {
transform: translateZ(-10px) scale(2);
}
这里是CodePen。
答案 0 :(得分:0)
perspective
应用于body
元素时不起作用。您需要将各节包装在一个包含元素中,并将perspective
应用于该元素。
HTML
<div class="p-container">
<div class="p-section">
<div class="content"></div>
<div class="bg"></div>
</div>
<div class="p-section">
<div class="content"></div>
<div class="bg"></div>
</div>
<div class="p-section">
<div class="content"></div>
<div class="bg"></div>
</div>
</div>
CSS
.p-container {
width: 100vw;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
perspective: 10px;
}