CSS | 3D 变换

介绍

在网页设计中，3D 变换可以为网站增添丰富的效果，让用户体验更加生动、真实。 3D 变换包括旋转、缩放、平移、倾斜、透视等操作。通过使用 CSS 3D 变换属性，可以轻松完成这些效果。本文将带你了解如何使用 CSS 3D 变换来实现一个炫酷的 3D 效果。

代码实现

立方体

首先我们来实现一个立方体。代码如下:

<style>
  .cube {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
  }
  .cube .face {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.2);
    line-height: 200px;
    text-align: center;
    font-size: 50px;
    color: #fff;
    transition: transform 1s;
  }
  .cube .front {
    transform: translateZ(100px);
  }
  .cube .back {
    transform: translateZ(-100px) rotateY(180deg);
  }
  .cube .left {
    transform: translateX(-100px) rotateY(-90deg);
  }
  .cube .right {
    transform: translateX(100px) rotateY(90deg);
  }
  .cube .top {
    transform: translateY(-100px) rotateX(90deg);
  }
  .cube .bottom {
    transform: translateY(100px) rotateX(-90deg);
  }
  .cube:hover .front {
    transform: translateZ(100px) rotateY(180deg);
  }
  .cube:hover .back {
    transform: translateZ(-100px);
  }
  .cube:hover .left {
    transform: translateX(-100px) rotateY(0);
  }
  .cube:hover .right {
    transform: translateX(100px) rotateY(360deg);
  }
  .cube:hover .top {
    transform: translateY(-100px) rotateX(360deg);
  }
  .cube:hover .bottom {
    transform: translateY(100px) rotateX(0);
  }
</style>

<div class="cube">
  <div class="face front">Front</div>
  <div class="face back">Back</div>
  <div class="face left">Left</div>
  <div class="face right">Right</div>
  <div class="face top">Top</div>
  <div class="face bottom">Bottom</div>
</div>

以上代码实现了一个立方体，并且当鼠标悬停在立方体上时，会有一些炫酷的 3D 效果出现。

3D 旋转

我们再来看一个使用 CSS 3D 变换实现的 3D 旋转的例子。代码如下：

<style>
  .rotate {
    width: 100px;
    height: 100px;
    background-color: #f00;
    animation: spin 2s linear infinite;
    transform-style: preserve-3d;
  }
  @keyframes spin {
    0% {
      transform: translateZ(-50px) rotateX(0) rotateY(0);
    }
    100% {
      transform: translateZ(-50px) rotateX(360deg) rotateY(360deg);
    }
  }
</style>

<div class="rotate"></div>

以上代码实现了一个 3D 旋转的效果。当你将鼠标悬停在方块上时，它将无限旋转起来。

总结

通过本文的介绍, 我们可以看到 CSS 3D 变换提供了很多的特性，可以轻松实现丰富的特效，使网站更加生动、趣味。在开发过程中可以考虑运用 CSS 3D 变换增加用户体验，提升网站的价值。