利用模糊实现视觉3D效果实例讲解

利用模糊可以实现视觉3D效果，具体步骤如下：

1. 准备工作

首先，我们需要在页面中添加一个容器元素，例如 div，用于承载模糊效果。然后，在该容器中添加一个需要进行3D效果处理的元素，例如图片或文字。

<div class="container">
   <img src="path/to/image" alt="3D效果图片" />
</div>

2. 添加模糊效果

接下来，我们需要在容器元素上添加模糊效果，这可以通过 CSS 的 backdrop-filter 属性实现。例如，我们可以添加一个 10 像素半径的高斯模糊效果：

.container {
  backdrop-filter: blur(10px);
}

通过调整 blur() 的参数，我们可以实现不同程度的模糊效果。

3. 添加堆叠上下文

由于模糊效果需要与容器元素和内部元素进行层叠显示，因此我们需要在容器元素上添加堆叠上下文。这可以通过 CSS 的 position 和 z-index 属性实现。

.container {
  position: relative;
  z-index: 1;
}

4. 添加视差效果

现在，我们已经成功地添加了模糊效果和堆叠上下文，接下来我们需要添加视差效果，这可以通过在容器元素上添加 transforms 属性实现。

.container {
  transform: perspective(1000px) rotateY(10deg);
}

通过 perspective() 属性我们可以设置视角，从而实现真实感，而通过 rotateY() 属性可以实现元素相对于 z 轴的旋转角度。

示例说明

示例一：图片视差效果

<div class="container">
   <img src="path/to/image" alt="3D效果图片" />
</div>

.container {
  position: relative;
  z-index: 1;
  perspective: 1000px;
  transform-style: preserve-3d;
  transform-origin: center;
  transform: translateZ(-50px);
}

img {
  width: 100%;
  height: auto;
  position:absolute;
  top:0;
  left:0;
  z-index: -1;
  filter: blur(8px);
  transform: translateZ(-8px) scale(1.2);
}

在这个示例中，我们在容器元素上设置了 perspective 属性，以确保视角感。然后，我们在 img 元素上添加了模糊效果并设置为在容器元素之后的堆叠顺序，同时通过 translateZ 和 scale 属性实现了视差效果。

示例二：文字视差效果

<div class="container">
  <h1>3D效果文字</h1>
</div>

.container {
  position: relative;
  z-index: 1;
  perspective: 1000px;
  transform-style: preserve-3d;
  transform-origin: center;
  transform: translateZ(-200px);
}

h1 {
  color: #fff;
  font-size: 60px;
  letter-spacing: 10px;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  filter: blur(8px);
  z-index: -1;
}

在这个示例中，我们在容器元素上设置了 perspective 属性以确保视角感。然后，我们在 h1 元素上添加了模糊效果并设置在容器元素之后的堆叠顺序，同时通过 translate 和 transform 属性实现了视差效果。

这样，我们就成功地利用模糊实现了视觉3D效果，通过以上两个示例的介绍，相信大家都可以轻松掌握了。