.cubik {
  display: block;
  padding: 30px;
  background: transparent;
}

.cube {
  margin: 80px auto;
  width: 120px;
  height: 120px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-36deg) rotateY(-45deg);
  animation: spin 8s infinite linear;
  z-index: -1;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #888;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  box-shadow: 0 0 20px #fff;
  border: 2px solid #fff;
}

.top {
  transform: rotateX(90deg) translateZ(60px);
  background-image: url('/images/shib.png');
  animation: shift-top 8s infinite ease-in-out;
}

.bottom {
  transform: rotateX(-90deg) translateZ(60px);
  background-image: url('/images/bnb.png');
  animation: shift-bottom 8s infinite ease-in-out;
} 

.front {
  transform: rotateY(0deg) translateZ(60px);
  background-image: url('/images/usdt.png');
  animation: shift-front 8s infinite ease-in-out;
}

.back {
  transform: rotateY(180deg) translateZ(60px);
  background-image: url('/images/ltc.png');
  animation: shift-back 8s infinite ease-in-out;
}

.left {
  transform: rotateY(-90deg) translateZ(60px);
  background-image: url('/images/doge.png');
  animation: shift-left 8s infinite ease-in-out;
}

.right {
  transform: rotateY(90deg) translateZ(60px);
  background-image: url('/images/trx.png');
  animation: shift-right 8s infinite ease-in-out;
}

@keyframes spin {
  0%, 100% {
    transform: rotateX(-36deg) rotateY(-45deg);
  }
}

@keyframes shift-top {
  0%, 100% {
    transform: rotateX(90deg) translateZ(60px);
  }
  50% {
    transform: rotateX(90deg) translateZ(180px); /* Верхняя грань отдаляется */
  }
}

@keyframes shift-bottom {
  0%, 100% {
    transform: rotateX(-90deg) translateZ(60px);
  }
  50% {
    transform: rotateX(-90deg) translateZ(180px); /* Нижняя грань отдаляется */
  }
}

@keyframes shift-front {
  0%, 100% {
    transform: rotateY(0deg) translateZ(60px);
  }
  50% {
    transform: rotateY(0deg) translateZ(180px); /* Передняя грань отдаляется */
  }
}

@keyframes shift-back {
  0%, 100% {
    transform: rotateY(180deg) translateZ(60px);
  }
  50% {
    transform: rotateY(180deg) translateZ(180px); /* Задняя грань отдаляется */
  }
}

@keyframes shift-left {
  0%, 100% {
    transform: rotateY(-90deg) translateZ(60px);
  }
  50% {
    transform: rotateY(-90deg) translateZ(180px); /* Левая грань отдаляется */
  }
}

@keyframes shift-right {
  0%, 100% {
    transform: rotateY(90deg) translateZ(60px);
  }
  50% {
    transform: rotateY(90deg) translateZ(180px); /* Правая грань отдаляется */
  }
}