.loader {
  zoom: 0.5;

  .container {
    width: 180px;
    height: 150px;
    perspective: 10000px;
    transform-style: preserve-3d;
    position: relative;
    animation: rotar 30s linear infinite alternate both;

    &.container-bottom {
      position: absolute;
      animation: none;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-360deg);
    }

    &.container-2 {
      top: 20px;
      transform: translate(-50%, -50%) rotate(180deg);
    }

    .base {
      width: 100%;
      height: 100%;
      clip-path: polygon(
        0% 50%,
        25% 0,
        75% 0,
        100% 50%,
        75% 100%,
        25% 100%,
        0% 50%
      );
      position: absolute;
      transform-origin: 50% 0;
      transform: rotateX(-90deg);

      &.base-top {
        background-color: #fff4;
        top: 0;
      }
    }

    .side {
      position: absolute;
      width: 49.5%;
      left: 50%;
      height: 180%;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      --rotate-x-general: 35deg;
      --rotate-x-general-negative: calc(-1 * var(--rotate-x-general));
      background-image: radial-gradient(
        circle at 100% 100%,
        magenta,
        mediumturquoise,
        mediumslateblue
      );

      &.side-1 {
        background-color: #0f08;
        transform-origin: 50% 0;
        transform: translateX(-50%) translateZ(-150px)
          rotateX(var(--rotate-x-general));
      }
      &.side-2 {
        background-color: #00f8;
        width: 49%;
        transform-origin: 100% 0%;
        transform: translateX(-50%) translateZ(-150px) rotateY(-239deg)
          rotateX(var(--rotate-x-general-negative));
      }
      &.side-3 {
        background-color: #f008;
        width: 49%;
        transform-origin: 0% 0%;
        transform: translateX(-50%) translateZ(-150px) rotateY(239deg)
          rotateX(var(--rotate-x-general-negative));
      }
      &.side-4 {
        background-color: #ff08;
        width: 49%;
        transform-origin: 0% 0%;
        transform: translateX(-50%) rotateY(-239deg)
          rotateX(var(--rotate-x-general));
      }
      &.side-5 {
        background-color: #0ff8;
        width: 49%;
        transform-origin: 100% 0%;
        transform: translateX(-50%) rotateY(239deg)
          rotateX(var(--rotate-x-general));
      }

      &.side-6 {
        background-color: #0f04;
        transform-origin: 50% 0;
        transform: translateX(-50%) rotateX(var(--rotate-x-general-negative));
      }
    }
  }
}

@keyframes rotar {
  0% {
    transform: rotateX(-738deg) rotateY(-738deg);
  }
  100% {
    transform: rotateX(738deg) rotateY(738deg);
  }
}