body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

/* 為了更好釐清製作 3D 動畫的順序，我這裡以後開始把項目拆開寫 */

.cube {
  width: 200px;
  height: 200px;
  position: relative;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  background-color: rgba(255, 165, 0, 0.8);
  border: 2px solid #fff;
}

/* start transform */
@keyframes rotateCube {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.cube {
  animation: rotateCube 6s linear infinite;
}

.front {
  transform: translateZ(100px);
}

.cube {
  transform-style: preserve-3d;
}

.back {
  transform: translateZ(-100px);
}

.right {
  transform: translateX(100px) rotateY(90deg);
}

.left {
  transform: translateX(-100px) rotateY(-90deg);
}

.top {
  transform: translateY(100px) rotateX(90deg);
}

.bottom {
  transform: translateY(-100px) rotateX(-90deg);
}