CSS 视差滚动（Parallax）：利用 `transform-style: preserve-3d` 与 `scale` 的纯 CSS 实现

大家好，今天我们来深入探讨一个纯CSS实现的视差滚动效果，核心是利用transform-style: preserve-3d和scale属性。这种方法无需JavaScript，能够带来性能上的优势，并且代码结构相对清晰。

什么是视差滚动？

视差滚动是一种网页设计技术，通过以不同的速度移动背景和前景元素，创造出深度和运动的错觉。这使得网页看起来更具吸引力和沉浸感，给用户带来更丰富的视觉体验。传统的视差滚动通常依赖 JavaScript 来监听滚动事件并动态更新元素的位置。而我们今天要讨论的方法，则完全依赖 CSS 的特性来实现这一效果。

核心原理：`transform-style: preserve-3d` 与 `scale`

实现纯 CSS 视差滚动的关键在于理解 transform-style: preserve-3d 和 scale 这两个 CSS 属性。

transform-style: preserve-3d: 这个属性指示元素的内容是否应该在 3D 空间中渲染。默认情况下，transform-style 的值为 flat，这意味着元素的子元素会被扁平化到元素的 2D 平面上。而 preserve-3d 则允许子元素保持其 3D 转换效果，这对于创建深度感至关重要。
scale: 这个属性用于缩放元素。通过对不同层级的元素应用不同的 scale 值，我们可以模拟出远近不同的效果，从而实现视差滚动。

实现步骤

我们将通过一个简单的例子来演示如何实现一个基本的视差滚动效果。假设我们有三个层级的元素：

.parallax-container: 这是最外层的容器，负责设置 3D 渲染环境。
.parallax-background: 背景层，通常是图片或颜色，用于创造远景。
.parallax-foreground: 前景层，包含文本或其他内容，用于与背景形成对比。

下面是 HTML 结构：

<div class="parallax-container">
  <div class="parallax-background"></div>
  <div class="parallax-foreground">
    <h1>视差滚动示例</h1>
    <p>这是一个使用纯 CSS 实现的视差滚动效果。</p>
  </div>
</div>

接下来是 CSS 样式：

/* 容器设置 */
.parallax-container {
  position: relative;
  height: 100vh; /* 视口高度 */
  overflow-x: hidden; /* 隐藏水平滚动条 */
  overflow-y: auto; /* 允许垂直滚动 */
  perspective: 300px; /* 设置透视距离，影响 3D 效果的强度 */
  transform-style: preserve-3d; /* 关键：开启 3D 渲染 */
}

/* 背景层 */
.parallax-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('your-background-image.jpg'); /* 替换为你的背景图片 */
  background-size: cover;
  background-position: center;
  z-index: -1; /* 将背景置于底层 */
  transform: translateZ(-100px) scale(1.33); /* 关键：Z轴位移和缩放 */
}

/* 前景层 */
.parallax-foreground {
  position: relative;
  padding: 50px;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
  transform: translateZ(0); /* 前景层不位移 */
}

/* 其他样式 */
h1 {
  text-align: center;
  color: #333;
}

p {
  font-size: 1.2em;
  line-height: 1.5;
}

代码解释：

.parallax-container:
- position: relative：允许子元素使用绝对定位。
- height: 100vh：设置容器高度为视口高度，确保滚动效果覆盖整个屏幕。
- overflow-x: hidden：隐藏水平滚动条，避免出现不必要的滚动。
- overflow-y: auto：允许垂直滚动，这是视差滚动的基础。
- perspective: 300px：设置透视距离。这个值决定了 3D 效果的强度。较小的值会产生更强的透视效果，反之则较弱。
- transform-style: preserve-3d：这是最关键的一点，它开启了 3D 渲染环境，使得子元素可以保持其 3D 转换效果。
.parallax-background:
- position: absolute：将背景层定位到容器的左上角。
- top: 0; left: 0; width: 100%; height: 100%：使背景层占据整个容器。
- background-image：设置背景图片。
- background-size: cover：确保背景图片覆盖整个容器。
- background-position: center：将背景图片居中显示。
- z-index: -1：将背景层置于底层，防止遮挡前景层。
- transform: translateZ(-100px) scale(1.33)：这是实现视差效果的关键。
  - translateZ(-100px)：将背景层在 Z 轴上向后移动 100 像素。这个值与 perspective 属性相关，共同决定了 3D 效果的强度。
  - scale(1.33)：将背景层放大 1.33 倍。这个值是为了弥补 translateZ 造成的视觉上的缩小，确保背景层仍然能够覆盖整个容器。scale 的值可以通过以下公式计算：scale = 1 + (-translateZ / perspective)，在这个例子中 scale = 1 + (100 / 300) = 1.33。
.parallax-foreground:
- position: relative：允许前景层的内容相对于自身定位。
- transform: translateZ(0)：前景层不进行 Z 轴位移，保持在默认的 Z 轴位置。

深入理解 `translateZ` 和 `scale` 的关系

translateZ 和 scale 的关系是实现视差滚动的核心。当我们使用 translateZ 将一个元素向后移动时，由于透视效果，这个元素在视觉上会变小。为了弥补这种视觉上的缩小，我们需要使用 scale 将元素放大。

正确的 scale 值可以通过以下公式计算：

scale = 1 + (-translateZ / perspective)

translateZ：Z 轴位移的距离。
perspective：透视距离。

例如，如果 translateZ 为 -200px，perspective 为 500px，那么 scale 应该为 1 + (200 / 500) = 1.4。

重要提示： translateZ 的值必须是负数，才能将元素向后移动。

优化和改进

性能优化： 避免过度使用 translateZ 和 scale，因为这些属性可能会导致性能问题，尤其是在移动设备上。可以通过减少层级数量、简化背景图片或使用 CSS Sprites 来优化性能。
响应式设计： 确保视差滚动效果在不同的屏幕尺寸上都能正常显示。可以使用媒体查询来调整 perspective、translateZ 和 scale 的值。
复杂动画： 可以结合 CSS 过渡和动画，创建更复杂的视差滚动效果。例如，可以使背景图片在滚动时缓慢旋转或平移。

兼容性注意事项

transform-style: preserve-3d 属性在较旧的浏览器中可能不受支持。为了确保兼容性，可以使用 Modernizr 等工具来检测浏览器是否支持该属性，并在不支持的浏览器中提供备选方案。
perspective 属性也可能存在兼容性问题。可以使用 -webkit-perspective 等前缀来提高兼容性。

实际应用场景

视差滚动效果可以应用于各种类型的网站，例如：

产品展示页面： 可以使用视差滚动来突出产品的特点，吸引用户的注意力。
故事讲述页面： 可以使用视差滚动来增强故事的沉浸感，让用户更容易投入其中。
单页网站： 可以使用视差滚动来引导用户浏览不同的部分，提高用户的参与度。
背景装饰： 可以作为一种纯粹的视觉装饰，增加网站的吸引力。

代码示例：多层视差滚动

下面是一个包含多个层级的完整代码示例，展示了如何创建更复杂的视差滚动效果：

<!DOCTYPE html>
<html>
<head>
  <title>多层视差滚动示例</title>
  <style>
    body {
      margin: 0;
      font-family: sans-serif;
    }

    .parallax-container {
      position: relative;
      height: 100vh;
      overflow-x: hidden;
      overflow-y: auto;
      perspective: 500px;
      transform-style: preserve-3d;
    }

    .parallax-background,
    .parallax-middleground1,
    .parallax-middleground2,
    .parallax-foreground {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .parallax-background {
      background-image: url('background.jpg'); /* 替换为你的背景图片 */
      background-size: cover;
      background-position: center;
      z-index: -4;
      transform: translateZ(-300px) scale(1.6);
    }

    .parallax-middleground1 {
      background-color: rgba(0, 0, 0, 0.2);
      z-index: -3;
      transform: translateZ(-200px) scale(1.4);
    }

    .parallax-middleground2 {
      background-color: rgba(0, 0, 0, 0.1);
      z-index: -2;
      transform: translateZ(-100px) scale(1.2);
    }

    .parallax-foreground {
      background-color: rgba(255, 255, 255, 0.8);
      z-index: -1;
      transform: translateZ(0);
      padding: 50px;
      text-align: center;
    }

    h1 {
      color: #333;
    }

    p {
      font-size: 1.2em;
      line-height: 1.5;
    }

    /* 额外内容，用于增加滚动长度 */
    .content {
      padding: 100px;
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="parallax-container">
    <div class="parallax-background"></div>
    <div class="parallax-middleground1"></div>
    <div class="parallax-middleground2"></div>
    <div class="parallax-foreground">
      <h1>多层视差滚动示例</h1>
      <p>这是一个使用纯 CSS 实现的多层视差滚动效果。</p>
    </div>
  </div>

  <div class="content">
    <h2>更多内容</h2>
    <p>滚动页面，体验多层视差效果。</p>
  </div>

</body>
</html>

注意： 将 background.jpg 替换为你自己的背景图片。

总结

通过本文，我们详细了解了如何使用纯 CSS 实现视差滚动效果，重点在于 transform-style: preserve-3d 和 scale 属性的应用。这种方法无需 JavaScript，能够带来性能上的优势，并且代码结构相对清晰，可以创造出更具吸引力和沉浸感的网页体验。

更多IT精英技术系列讲座，到智猿学院

CSS 视差滚动（Parallax）：利用 `transform-style: preserve-3d` 与 `scale` 的纯 CSS 实现