Amazing~巧用 CSS 视差实现酷炫交互动效

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

使用 transform: translate3d 实现滚动视差

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

原理就是：

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

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

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

关于 transform-style: preserve-3d 以及 perspective 本文不做过多篇幅展开，默认读者都有所了解，还不是特别清楚的，可以先了解下 CSS 3D。

核心代码表示就是：

<div class="g-container">
    <div class="section-one">translateZ(-1)</div>
    <div class="section-two">translateZ(-2)</div>
    <div class="section-three">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，滚动滚动条，效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4oGxSK2b-1652942856151)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/81c26e91a1dc48cf9a8a12db87ae0b22~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

CodePen Demo – CSS 3D parallax

很明显，当滚动滚动条时，不同子元素的位移程度从视觉上看是不一样的，也就达到了所谓的滚动视差效果。

借助 CSS 视差实现酷炫交互动效

OK，有了上面的铺垫，我们来看看这样两个有趣的交互效果。由群里的日服第一切图仔 wheatup 友情提供。

先来看第一个效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UUrdjEl0-1652942856152)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7950aaa16e0646719bf82a96989ef26c~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

效果是一种文本交替在不同高度的层展示，并且在滚动的过程中，会有明显的 3D 视差效果。

这个效果并不困难，核心就在于：

1. 利用了 transform-style: preserve-3d 和 perspective 构建不同的层次效果，制作视差效果
2. 利用元素的 ::before，::after 构建了 3D 的效果

我们看一个最小化 DEMO：

<div class="g-container">
    <div class="g-box"></div>
    &