CSS立方体依次旋转面是一种非常有趣的CSS动画效果，通过CSS3的3D转换属性和关键帧动画，可以实现一个带有立方体外观的元素，或动态地旋转不同的面。

/* 在CSS中，我们可以使用transform-style属性来定义一个元素的3D变形方式，这里我们使用preserve-3d值来表示元素具有3D空间，子元素可以继承该空间的属性 */
.container {
  transform-style: preserve-3d;
}

/* 我们使用transform-style属性将立方体包裹在一个容器内，并可以逐个设定每个面的样式 */
.cube {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(15deg);
  animation: rotate-cube 12s infinite;
}

/* 我们需要将立方体的六个面分别定义为一个div元素，并将这些元素放置于固定的位置上 */
.cube-face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  color: #fff;
}

.front-face {
  transform: translateZ(50px);
  background-color: #FF5722;
}

.back-face {
  transform: rotateY(180deg) translateZ(50px);
  background-color: #607D8B;
}

.right-face {
  transform: rotateY(-90deg) translateZ(50px);
  background-color: #9C27B0;
}

.left-face {
  transform: rotateY(90deg) translateZ(50px);
  background-color: #673AB7;
}

.top-face {
  transform: rotateX(90deg) translateZ(50px);
  background-color: #4CAF50;
}

.bottom-face {
  transform: rotateX(-90deg) translateZ(50px);
  background-color: #F44336;
}

/* 最后，我们为每个面添加动画效果 */
@keyframes rotate-cube {
    0% {
      transform: rotateX(-15deg) rotateY(15deg);
    }
    100% {
      transform: rotateX(-15deg) rotateY(375deg);
    }
}

通过上面的代码，我们已经成功地创建了一个带有立方体外观的元素，并且通过旋转动画，不同的面将逐一被展示。在实际应用中，我们可以通过这种方法来实现多种场景下的动画效果，如翻书、盒子翻转、3D工艺展示等。