利用纯CSS创建 3D 穿梭效果「附代码」

1. 介绍

这篇文章将会告诉你如何使用纯 CSS 来创造一个 3D 穿梭的效果。这个效果会在用户移动鼠标时，切换两个不同的状态，整个过程非常顺畅。

2. 实现过程

2.1 HTML

实现这个效果需要应用一些 HTML 和 CSS，首先我们需要下面这样的 HTML 结构：

  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
  </div>

在这段代码中，我们创建了一个包含两个空盒子的容器，之后我们将使用 CSS 来添加动画效果。

2.2 CSS

首先让我们来设置一下容器和盒子的基本样式：

  .container {
    position: relative;
    perspective: 800px;
    height: 200px;
  }
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background-color: #333;
    transition: transform 0.5s;
  }

在这里，我们将容器的位置设置为相对，为了启用 3D 功能，将透视设置为 800px。对于盒子，我们将它们的位置定位到了容器的中心，并设置了其宽度、高度、背景颜色和过渡动画效果。

如下代码实现了悬停时的效果：

  .container:hover .box:first-of-type {
    transform: translate(-400%, -50%) rotateY(45deg);
  }
  .container:hover .box:last-of-type {
    transform: translate(400%, -50%) rotateY(-45deg);
  }

在这些 CSS 规则中，我们指定了鼠标悬停在容器上时要应用的样式。我们使用 CSS 的 hover 伪类来为容器添加悬停响应。要注意的是这里使用了 translate() 函数来控制盒子的移动，以及 rotateY() 函数来控制盒子的旋转。

2.3 效果演示

最终的效果如下，可以自由移动鼠标来改变 3D 穿梭的效果。

3. 总结

通过本文我们可以学习如何使用 CSS 创造一个非常炫酷的 3D 穿梭效果。相信如果你想要在你的网页上加入一些高端动画效果的话，这篇文章会对你有所帮助。