[分享]css两个立方体

最近我学习了CSS的立方体，今天我计划分享如何使用CSS来创建两个立方体。

 .container{
    position: relative;
    margin-top: 100px;
    margin-bottom: 100px;
  }
  
  .cube{
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    animation: rotate 10s linear infinite;
  }
  
  .cube:nth-child(1){
    transform: translateZ(-100px);
  }
  
  .cube:nth-child(2){
    transform: rotateY(90deg) translateZ(-100px);
  }
  
  .face{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #184a45;
    opacity: 0.5;
    border: 2px solid black;
  }
  
  .face.front{
    transform: translateZ(100px);
  }
  
  .face.back{
    transform: rotateY(180deg) translateZ(100px);
  }
  
  .face.top{
    transform: rotateX(-90deg) translateZ(100px);
  }
  
  .face.bottom{
    transform: rotateX(90deg) translateZ(100px);
  }
  
  .face.left{
    transform: rotateY(-90deg) translateZ(100px);
  }
  
  .face.right{
    transform: rotateY(90deg) translateZ(100px);
  }
  
  @keyframes rotate{
    0%{
      transform: rotateX(0deg) rotateY(0deg);
    }
    
    100%{
      transform: rotateX(360deg) rotateY(360deg);
    }
  } 

首先，我们需要一个父容器，该容器将包含两个立方体。我们使用相对定位的容器，并稍微调整一下外边距。

接下来，我们将为每个立方体创建一个类名为cube的元素。我们使用绝对定位，并使用3D视差变换来定义它们的3D空间。我们还定义了一个旋转动画，让立方体保持旋转。

我们使用:nth-child()伪选择器为每个立方体指定不同的转换属性。这些属性决定了它们在3D空间中的位置。

接下来，我们为立方体的每个面创建一个类名为face的元素。我们将它们绝对定位在立方体内，并为它们定义了背景颜色、透明度和一个黑色边框。

我们使用与立方体相同的变换技巧来定位每个面。因此，我们定义了六个不同的类选择器，每个选择器对应一个不同的面。我们还为立方体定义了一个旋转动画，这样我们的立方体将保持旋转。

现在我们已经完成了CSS的立方体，接下来是展示它们的时候了！