我已经成功地使成为纯css视差，太难了!^ ^
但是我遇到了一个问题。
为了实现视差，我们必须添加overflow-y : scrollproper，以便使用perspective proper从上到下滚动块。
问题是，它迫使我有一个丑陋的滚动条，我怎么才能删除它?
谢谢!:)
下面是我的代码片段:
*{box-sizing: border-box;}
body{
margin: 0;
}
.parent{
perspective: 200px;
perspective-origin: bottom right;
height: 100vh;
overflow-y: scroll;
}
.parent:before{
content:'';
position: absolute;
background: linear-gradient(white, #A00000);
height: 300vh;
width: 100vw;
}
section{
height: 50vh;
transform-style: preserve-3d;
}
span{
background: url('https://image.flaticon.com/icons/png/512/248/248983.png') no-repeat;
height: 100%;
width: 100%;
position: absolute;
}
.firstChild{
transform: translateZ(-200px);
}
.secondChild{
background: url('https://image.flaticon.com/icons/png/512/248/248983.png') no-repeat;
transform: translateZ(-100px) ;
}
.secondChild{
transform: translateZ(-300px) ;
}<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> My website is not awesome.</h1>
<div class="parent">
<section><span class="firstChild"></span></section>
<section><span class="secondChild"></span></section>
<section><span class="thirdChild"></span></section>
</div>
</body>
</html>将此添加到css中，使滚动条不可见:
.parent::-webkit-scrollbar {
display: none;
}