原理与上述的星空穿梭大致相同，4 面墙的背景图使用 CSS 渐变可以很轻松的绘制出来，接下来就只是需要考虑如何让动画能无限循环下去，控制好首尾的衔接。
该效果最早见于 jkantner 的 CodePen，在此基础上我对其进行了完善和丰富，完整代码，你可以猛击这里：CSS 灵感 -- 3D 无限延伸视角动画
视差效果由于 CSS 3D 的特性，它天生就非常适合拿来制作一些视差效果。
本章节的内容之前在我的另外一篇文章，也有过一些讨论 -- CSS 实现视差效果
原理就是：
我们给容器设置上 transform-style: preserve-3d 和 perspective: [x]px，那么处于这个容器的子元素就将位于3D空间中，
再给子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样
滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。
核心代码表示就是：
<div> <div>translateZ(-1)</div> <div>translateZ(-2)</div> <div>translateZ(-3)</div> </div>
html { height: 100%; overflow: hidden; } body { perspective: 1px; transform-style: preserve-3d; height: 100%; overflow-y: scroll; overflow-x: hidden; } .g-container { height: 150%; .section-one { transform: translateZ(-1px); } .section-two { transform: translateZ(-2px); } .section-three { transform: translateZ(-3px); } }
总结就是父元素设置 transform-style: preserve-3d 和 perspective: 1px，子元素设置不同的 transform: translateZ，滚动滚动条，效果如下：
CodePen Demo -- CSS 3D parallax
很明显，当滚动滚动条时，不同子元素的位移程度从视觉上看是不一样的，也就达到了所谓的滚动视差效果。
滚动视差文字阴影/虚影效果/多图展示那么，运用 translate3d 的视差效果，又能有一些什么好玩的效果呢？下面这个滚动视差文字阴影/虚影效果很有意思：
CodePen Demo -- CSS translate3d Parallax
另外一种就是我们可以把这个技巧运用到类似个人主页，图片展示等一些大屏场景下。
核心就是给每张图片设置不同的 translateZ，给父元素设置一个 persepective 即可，这样，在上下滚动的过程中，就能出现简单的视差效果：
CodePen Demo -- CSS Scroll Parallax Effect
同理，这个滚动视差不仅仅可以作用于上下的滚动，对于左右方向的滚动也是同样生效的：
CodePen Demo -- CSS-Only Horizontal Parallax Gallery By Paulina Hetman
其他实用场景介绍在这一章节，会介绍一些有趣的，可以落地的 3D 效果或者动画。
404 Rolling Box在我自己的个人网站的 404 页面，就使用 CSS 3D 实现的立方体制作的一个 404 效果：
其核心就在于在一个 CSS 3D 立方体的基础上：
添加立方体的滚动动画
控制下落的缓动函数，及落地的震荡动画（为了效果更为逼真，运用了设计动画中的预备动作、跟随和重叠动画等技巧）
控制立方体及地面数字画面的平移
控制动画的无限循环