用 CSS 制作旋转的立方体：让图片随心旋转，美轮美奂！

现在，让我们开始制作这个旋转的立方体吧！

首先，我们需要创建一个 HTML 结构。这个结构将包含一个 <div> 元素，它将用作立方体的容器。在 <div> 元素中，我们将创建六个 <div> 元素，它们将用作立方体的六个面。

<div class="cube-container">
  <div class="cube-face front"></div>
  <div class="cube-face back"></div>
  <div class="cube-face left"></div>
  <div class="cube-face right"></div>
  <div class="cube-face top"></div>
  <div class="cube-face bottom"></div>
</div>

接下来，我们需要使用 CSS 来设置立方体的样式。我们将使用 transform 属性来实现立方体的旋转。

.cube-container {
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.cube-face {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.cube-face.front {
  transform: translateZ(150px);
}

.cube-face.back {
  transform: translateZ(-150px) rotateY(180deg);
}

.cube-face.left {
  transform: translateX(-150px) rotateY(-90deg);
}

.cube-face.right {
  transform: translateX(150px) rotateY(90deg);
}

.cube-face.top {
  transform: translateY(-150px) rotateX(90deg);
}

.cube-face.bottom {
  transform: translateY(150px) rotateX(-90deg);
}

.cube-container:hover .cube-face {
  animation: spin 5s infinite linear;
}

@keyframes spin {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }
}

现在，我们的立方体已经可以旋转了。当您将鼠标悬停在立方体上时，它将开始旋转。

为了让立方体看起来更加美观，我们可以给每个面设置一张照片。我们可以使用 background-image 属性来实现这一点。

.cube-face.front {
  background-image: url("front.jpg");
}

.cube-face.back {
  background-image: url("back.jpg");
}

.cube-face.left {
  background-image: url("left.jpg");
}

.cube-face.right {
  background-image: url("right.jpg");
}

.cube-face.top {
  background-image: url("top.jpg");
}

.cube-face.bottom {
  background-image: url("bottom.jpg");
}

现在，我们的立方体已经完全制作完成了。它不仅可以旋转，还可以展示照片。您可以在您的网站或博客上使用这个立方体来展示您的产品、作品或回忆。