3D Rotating Cube

创作时间:

作者:

@小白创作中心

3D Rotating Cube

引用

来源

https://docs.pingcode.com/baike/3112404

用HTML和CSS使立方体旋转需要使用3D变换技术、关键帧动画和适当的HTML结构。首先，我们需要了解如何定义一个立方体的结构，然后通过CSS的3D变换属性来使其旋转。关键步骤包括：定义立方体的各个面、应用3D变换、创建关键帧动画。接下来，我们将详细描述其中的一个关键点——创建关键帧动画，通过定义关键帧，我们可以控制立方体在不同时间点的状态，从而实现平滑的旋转效果。

一、定义立方体的结构

要创建一个3D立方体，首先需要在HTML中定义一个包含六个面的容器。这些面将构成立方体的各个侧面。我们可以使用
<div>
标签来实现这一点。立方体的结构代码如下：

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

在这个例子中，
.cube
类是立方体的容器，
.face
类是立方体的每个面，每个面还有一个特定的类名，比如
.front
、
.back
等，用来分别定义每个面的样式和位置。

二、应用3D变换

应用3D变换是实现立方体旋转的核心。我们使用CSS的
transform
属性来定位和旋转立方体的各个面。以下是CSS代码示例：

.cube {
  position: relative;  
  width: 200px;  
  height: 200px;  
  transform-style: preserve-3d;  
  animation: rotate 5s infinite linear;  
}  
.face {  
  position: absolute;  
  width: 200px;  
  height: 200px;  
  background: rgba(255, 255, 255, 0.9);  
  border: 1px solid #ccc;  
}  
.front  { transform: translateZ(100px); }  
.back   { transform: rotateY(180deg) translateZ(100px); }  
.left   { transform: rotateY(-90deg) translateZ(100px); }  
.right  { transform: rotateY(90deg) translateZ(100px); }  
.top    { transform: rotateX(90deg) translateZ(100px); }  
.bottom { transform: rotateX(-90deg) translateZ(100px); }

在这段代码中，
transform-style: preserve-3d;
确保了子元素在3D空间中的相对位置。每个面都通过
transform
属性进行定位和旋转，使其形成一个立方体。

三、创建关键帧动画

关键帧动画用于控制立方体的旋转。我们可以定义一个关键帧动画，让立方体在不同时间点执行不同的旋转，从而实现平滑的旋转效果。以下是关键帧动画的代码示例：

@keyframes rotate {
  0%   { transform: rotateX(0deg) rotateY(0deg); }  
  100% { transform: rotateX(360deg) rotateY(360deg); }  
}

在这个例子中，
rotate
动画在0%到100%的时间段内让立方体绕X轴和Y轴旋转360度，从而实现持续的旋转效果。

四、添加样式和效果

为了让立方体看起来更逼真，我们可以添加一些样式和效果，比如阴影和背景颜色。以下是一些示例代码：

.cube {
  position: relative;  
  width: 200px;  
  height: 200px;  
  transform-style: preserve-3d;  
  animation: rotate 5s infinite linear;  
}  
.face {  
  position: absolute;  
  width: 200px;  
  height: 200px;  
  background: rgba(255, 255, 255, 0.9);  
  border: 1px solid #ccc;  
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);  
}  
.front  { transform: translateZ(100px); }  
.back   { transform: rotateY(180deg) translateZ(100px); }  
.left   { transform: rotateY(-90deg) translateZ(100px); }  
.right  { transform: rotateY(90deg) translateZ(100px); }  
.top    { transform: rotateX(90deg) translateZ(100px); }  
.bottom { transform: rotateX(-90deg) translateZ(100px); }

在这个例子中，我们为每个面添加了
box-shadow
属性，使立方体的阴影更逼真。此外，我们还可以使用不同的背景颜色或图像为每个面添加不同的效果。

五、响应式设计

为了让立方体在不同设备上都能良好显示，我们可以使用响应式设计。以下是一些示例代码：

@media (max-width: 600px) {
  .cube {  
    width: 100px;  
    height: 100px;  
  }  
  .face {  
    width: 100px;  
    height: 100px;  
  }  
}

在这个例子中，当屏幕宽度小于600像素时，我们将立方体和各个面的尺寸减小一半，以适应较小的屏幕。

六、交互效果

为了增加用户的互动体验，我们还可以为立方体添加一些交互效果，比如鼠标悬停时暂停旋转。以下是一些示例代码：

.cube:hover {
  animation-play-state: paused;  
}

在这个例子中，当用户将鼠标悬停在立方体上时，动画将暂停，立方体停止旋转。

七、综合示例

最后，我们将所有代码整合在一起，形成一个完整的示例：

<!DOCTYPE html>
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>3D Rotating Cube</title>  
  <style>  
    body {  
      display: flex;  
      justify-content: center;  
      align-items: center;  
      height: 100vh;  
      background-color: #f0f0f0;  
      margin: 0;  
    }  
    .cube {  
      position: relative;  
      width: 200px;  
      height: 200px;  
      transform-style: preserve-3d;  
      animation: rotate 5s infinite linear;  
    }  
    .face {  
      position: absolute;  
      width: 200px;  
      height: 200px;  
      background: rgba(255, 255, 255, 0.9);  
      border: 1px solid #ccc;  
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);  
    }  
    .front  { transform: translateZ(100px); }  
    .back   { transform: rotateY(180deg) translateZ(100px); }  
    .left   { transform: rotateY(-90deg) translateZ(100px); }  
    .right  { transform: rotateY(90deg) translateZ(100px); }  
    .top    { transform: rotateX(90deg) translateZ(100px); }  
    .bottom { transform: rotateX(-90deg) translateZ(100px); }  
    @keyframes rotate {  
      0%   { transform: rotateX(0deg) rotateY(0deg); }  
      100% { transform: rotateX(360deg) rotateY(360deg); }  
    }  
    @media (max-width: 600px) {  
      .cube {  
        width: 100px;  
        height: 100px;  
      }  
      .face {  
        width: 100px;  
        height: 100px;  
      }  
    }  
    .cube:hover {  
      animation-play-state: paused;  
    }  
  </style>  
</head>  
<body>  
  <div class="cube">  
    <div class="face front"></div>  
    <div class="face back"></div>  
    <div class="face left"></div>  
    <div class="face right"></div>  
    <div class="face top"></div>  
    <div class="face bottom"></div>  
  </div>  
</body>  
</html>

在这个示例中，我们定义了一个3D旋转立方体，并为其添加了阴影、响应式设计和交互效果。通过这些步骤，我们实现了一个完整的3D旋转立方体效果。