CSS视差效果如何巧妙运用，打造惊艳交互动画？

本文共计2773个文字，预计阅读时间需要12分钟。

原文：本篇文章将介绍利用CSS实现滚动视差效果的一个小技巧，并且利用这个技巧来制作一些有创意的交互特效。

改写后：本文将分享一招使用CSS实现滚动视差效果的技巧，并借此制作出有趣的交互效果。

本文将介绍利用 CSS 实现滚动视差效果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。

关于使用 CSS 实现滚动视差效果，在之前有一篇文章详细描述过具体方案 - CSS 实现视差效果，感兴趣的同学可以先看看这篇文章。

这里，会运用上这样一种纯 CSS 的视差技巧：

使用 transform: translate3d 实现滚动视差

这里利用的是 CSS 3D，实现滚动视差效果。

原理就是：

1. 我们给容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中，

2. 再给子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样

3. 滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。