.container1 {
  --size: 200px;
  --zoom: 0.5;
  --color-1: #0ff8;
  --color-2: #0f08;
  --color-3: #00f8;
  --color-4: #f008;
  width: var(--size);
  height: var(--size);
  animation: spinAround 10s linear infinite alternate both;
  zoom: var(--zoom);

  &:hover {
    --color-4: #0ff8;
    --color-1: #0f08;
    --color-2: #00f8;
    --color-3: #f008;
  }

  &,
  .rectangle,
  .side,
  .block {
    position: absolute;
    transform-style: preserve-3d;
    perspective: 10000px;
  }

  .block {
    width: 100%;
    height: 100%;

    &.second-block {
      bottom: 50%;
      left: -60px;
      transform: rotate(90deg);
    }

    &.third-block {
      bottom: -40px;
      transform: rotateX(-90deg) translateY(200px);
    }

    .rectangle {
      width: 100%;
      height: 40px;

      .side {
        width: 100%;
        height: 100%;

        &:nth-child(1) {
          background-color: var(--color-1);
          transform: rotateX(0deg);
        }
        &:nth-child(2) {
          background-color: var(--color-2);
          transform: rotateX(0deg) translateZ(-40px);
        }

        &:nth-child(3) {
          background-color: var(--color-3);
          transform-origin: 50% 0;
          transform: rotateX(-90deg);
        }

        &:nth-child(4) {
          background-color: var(--color-4);
          transform-origin: 50% 100%;
          transform: rotateX(90deg);
        }
      }
    }

    .rectangle-1 {
      left: 40px;
    }

    .rectangle-2 {
      transform: translateZ(-200px);
    }

    .rectangle-3 {
      transform-origin: 100% 0%;
      transform: rotateY(-90deg) translateX(-40px);
    }
    .rectangle-4 {
      left: 40px;
      transform-origin: 0% 0%;
      transform: rotateY(90deg);
    }
  }
}

@keyframes spinAround {
  0% {
    transform: translate(-50%, -50%) rotateX(15deg) rotateY(15deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(375deg) rotateY(375deg);
  }
}


/* From Uiverse.io by csemszepp */ 
@keyframes animate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

.container2 {
  position: relative;
  top: -80px;
  transform: skewY(-20deg);
  animation: animate 5s linear infinite;
  .cube {
    position: relative;
    z-index: 2;
    &:nth-child(2) {
      z-index: 1;
      translate: -60px -60px;
    }
    &:nth-child(3) {
      z-index: 3;
      translate: 60px 60px;
    }
    div {
      position: absolute;
      display: flex;
      flex-direction: column;
      gap: 30px;
      translate: calc(-70px * var(--x)) calc(-60px * var(--y));
      span {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 50px;
        background: #dcdcdc;
        z-index: calc(1 * var(--i));
        transition: 1.5s;
        &:hover {
          transition: 0s;
          background: #ef4149;
          filter: drop-shadow(0 0 30px #ef4149);
          &:before,
          &:after {
            transition: 0s;
            background: #ef4149;
          }
        }
        &:before {
          content: "";
          position: absolute;
          left: -40px;
          width: 40px;
          height: 100%;
          background: #fff;
          transform-origin: right;
          transform: skewY(45deg);
          transition: 1.5s;
        }
        &:after {
          content: "";
          position: absolute;
          top: -40px;
          left: 0px;
          width: 100%;
          height: 40px;
          background: #f2f2f2;
          transform-origin: bottom;
          transform: skewX(45deg);
          transition: 1.5s;
        }
      }
    }
  }
}