.container-octa {
  --w: 150px;
  --h: 150px;
  zoom: 0.8;
  width: var(--w);
  height: var(--h);
  position: absolute;
  top: 50%;
  left: 50%;
  perspective: 5000px;
  transform-style: preserve-3d;
  animation: rotar 8s linear infinite both;

  .side {
    position: absolute;
    width: 200px;
    width: var(--w);
    height: var(--h);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: radial-gradient(circle, transparent, #00c8ff88, transparent);
  }

  .side-btn {
    top: 100%;
    background-color: transparent;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  }

  .base {
    clip-path: none;
    transform-origin: 50% 100%;
    transform: rotateX(-90deg);
    visibility: hidden;
  }

  .front {
    transform-origin: 50% 100%;
    transform: rotateX(-30deg);
  }

  .back {
    transform-origin: 50% 100%;
    transform: translateZ(var(--w)) rotateX(30deg);
  }

  .right {
    transform-origin: 100% 100%;
    transform: rotateY(90deg) rotateX(30deg);
  }

  .left {
    transform-origin: 0% 100%;
    transform: rotateY(-90deg) rotateX(30deg);
  }

  .front-bottom {
    transform-origin: 50% 0;
    transform: rotateX(30deg);
  }

  .back-bottom {
    transform-origin: 50% 0;
    transform: translateZ(var(--w)) rotateX(-30deg);
  }

  .left-bottom {
    transform-origin: 0% 0%;
    transform: rotateY(-90deg) rotateX(-30deg);
  }

  .right-bottom {
    transform-origin: 100% 0%;
    transform: rotateY(90deg) rotateX(-30deg);
  }
}

@keyframes rotar {
  0% {
    transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg);
  }
}