html,
body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #2f3542;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.cube {
  width: 250px;
  height: 250px;
  transform-style: preserve-3d;
  transform-origin: 125px 125px 0;
  animation: rotate-cube 10s ease-in-out infinite;
}

.cube > div {
  width: 250px;
  height: 250px;
  background-size: cover;
  background-position: center center;
  opacity: 0.8;
  position: absolute;
  box-shadow: inset 0 0 4px 2px rgba(106, 106, 106, 0.4);
}

/* 前 */
.cube .img1 {
  background-image: url("1.png");
  transform: rotateY(0deg) translateZ(125px);
}

/* 右 */
.cube .img2 {
  background-image: url("2.png");
  transform: rotateY(90deg) translateZ(125px);
}

/* 左 */
.cube .img3 {
  background-image: url("3.png");
  transform: rotateY(-90deg) translateZ(125px);
}

/* 下 */
.cube .img4 {
  background-image: url("4.png");
  transform: rotateX(90deg) translateZ(125px);
}

/* 上 */
.cube .img5 {
  background-image: url("5.png");
  transform: rotateX(-90deg) translateZ(125px);
}

/* 后 */
.cube .img6 {
  background-image: url("6.png");
  transform: rotateY(180deg) translateZ(125px);
}

@keyframes rotate-cube {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  20% {
    /* 右边图片 */
    transform: rotateY(-90deg);
  }
  40% {
    /* 上 */
    transform: rotateX(-90deg);
  }
  60% {
    /* 左 */
    transform: rotateY(90deg);
  }
  80% {
    /* 下 */
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
}