css 3d滚动,CSS - 使用CSS 3D属性来完成页面视差滚动效果。

视差滚动

}html,

body{margin:0;padding:0;

}html{overflow:hidden;

}body{height:100vh;

/*开启3d*/perspective:100px;transform-style:preserve-3d;overflow-y:auto;

}.main{display:flex;flex-direction:column;align-items:center;justify-content:center;

}.list-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:45vh;overflow:hidden;

}.list-item:hover .item-image::before{background-color:rgba(0, 0, 0, 0.2);

}.item-image{position:absolute;width:100%;height:100%;z-index:-1;transform:translateZ(-50px) scale(2.4);

}.item-image::before{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.4);transition:all 0.3s ease;

}.item-image img{display:block;width:100%;height:100%;

/*object-fit 需要设定尺寸*/object-fit:cover;

}.item-text{color:#fff;text-align:center;font-family:"Courier New", Courier, monospace;

}.text-title{font-size:2rem;font-weight:bolder;margin-bottom:20px;

}.text-desc{font-size:1.2rem;

}