.scene {
      width: 100vw; /* Adjust as needed */
      height: 100vh; /* Adjust as needed */
      perspective: 800px; /* A good starting value for perspective */
      display: flex; /* To center the box within the scene */
      justify-content: center;
      align-items: center;
    }

    @keyframes rotate {
      from {
        transform: rotateX(0deg) rotateY(0deg);
      }
      to {
        transform: rotateX(360deg) rotateY(360deg);
      }
    }

    .box {
        animation: rotate 5s infinite linear; /* Rotate the box continuously */
      width: 500px;
      height: 500px; 
      position: relative;
      transform-style: preserve-3d;
    }

   @property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 114deg;
}

@keyframes spinner {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}
    .box__face {
    animation: spinner 0.3s linear infinite;
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(var(--angle), #A100FFFF 0%, #71C4FFFF 100%);
      border: 1px solid #333;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }

    .box__face--front {
      transform: translateZ(250px);
    }

    .box__face--back {
      transform: translateZ(-250px) rotateY(180deg);
    }

    .box__face--right {
      transform: translateX(250px) rotateY(90deg);
    }

    .box__face--left {
      transform: translateX(-250px) rotateY(-90deg);
    }

    .box__face--top {
      transform: translateY(-250px) rotateX(90deg);
    }

    .box__face--bottom {
      transform: translateY(250px) rotateX(-90deg);
    }