使用纯CSS实现视差滚动

效果

滚动下面白色背景区域：

CSS代码：
.scroll {
    height: 600px;
    perspective: 1px;
    position: relative;
    background-color: #fff;
    /* for Firefox */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    overflow: auto;
}
.box {
    height: 1280px;
    transform-style: preserve-3d;
    transform: translateZ(-1px);
    position: relative;
}
.iphone {
    position: absolute; left: 50%;
    transform: translate3d(-50%, -120px, -1px) scale(2);
}
.smile, .flower, .music, .pdf { 
  /* 见页面源代码... */ 
}
HTML代码：
<div class="scroll">
    <div class="box">
        <img src="./mobile_1_iphone.jpg" class="iphone">
        <i class="smile"></i>
        <i class="flower"></i>
        <i class="music"></i>
        <i class="pdf"></i>
    </div>
</div>

原理

参见：https://www.zhangxinxu.com/wordpress/?p=4720