视差滚动，其实原理源自生活中，举个例子：
我们坐在车上，车以60km的速度往前开，观察路旁的树，感觉景物倒退的速度很快，如果我们看远处的高楼，发现倒退的比较慢，虽然相对于路边的树和远处的高楼，同样我们都是以60km的速度离开，但是眼睛给我们的感觉，像是远处的景物离开的慢一点，其实这就是视差效果。
生活中这样的例子，举一反三到网页开发中来，如果我们能给两个物体设置离我们眼睛不同的距离，那么是否也可以出现视差效果呢？
先介绍perspective属性，定义3D元素离观察点的位置。使用这个属性，就能模拟出视差效果：

上半部分滚动的快一点，下半部分慢一点，就产生了视差效果，具体代码：

关键在于：
perspective: 1px;定义了container容器距观察点的距离是1px，再将容器内的子元素inner使用transform属性设置为距离容器-1px：transform: translateZ(-1px)；
空间位置示意：

这样就实现了视差效果。