/* CSS for general styling 
body {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background: #1e6f0a;
}

.cube {
    width: 100px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 10s linear infinite;
}
*/
.box img {
    width: auto;
    height: 100%;
    object-fit: cover;
}

.box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.95;
}

/* Applying styles to each face */
.box1 {
    transform: translateZ(0px);
}

.box2 {
    transform: rotateY(90deg) translateX(100px);
    transform-origin: right;
}

.box3 {
    transform: rotateY(180deg) translateZ(100px);
}

.box4 {
    transform: rotateY(-90deg) translateX(-100px);
    transform-origin: left;
}

.box5 {
    transform: rotateX(-90deg) translateY(-100px);
    transform-origin: top;
}

.box6 {
    transform: rotateX(90deg) translateY(100px);
    transform-origin: bottom;
}

/* Animating the elements */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotateY(90deg);
    }

    50% {
        transform: rotateY(180deg);
    }

    75% {
        transform: rotateY(270deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}
@keyframes rotate1 {
    0%, 100% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotateY(90deg) rotateZ(90deg);
    }

    40% {
        transform: rotateY(180deg) rotateZ(-90deg);
    }

    60% {
        transform: rotateY(270deg) rotateZ(90deg);
    }

    80% {
        transform: rotateY(360deg) rotateZ(-90deg);
    }
}

/***************************************************/
.cuboid {
  margin: 0;
  width: 72px;
  display: grid;
  place-content: center;
  background: #556270;
  animation: b 9s infinite;
}

.cube {
  --s: 72px; /* the size */
  display: grid;
  transform-style: preserve-3d;
  --_p: perspective(calc(2.5*var(--s)));
  animation: r 9s infinite cubic-bezier(.5,-0.5,.5,1.5);
}
.cube img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  transform: var(--_t, ) translateZ(calc(var(--s)/2));
  background: white;
}
.cube img:nth-child(2) {--_t: rotateX(-90deg)}
.cube img:nth-child(3) {--_t: rotateY( 90deg) rotate(-90deg)}
.cube img:nth-child(4) {--_t: rotateX(180deg) rotate( 90deg)}
.cube img:nth-child(5) {--_t: rotateX( 90deg) rotate( 90deg)}
.cube img:nth-child(6) {--_t: rotateY(-90deg)}

@keyframes r {
  0%,9%   {transform: var(--_p)}
  14%,19% {transform: var(--_p) rotateX(90deg)}
  31%,36% {transform: var(--_p) rotateX(90deg) rotateZ(90deg)}
  47%,52% {transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg)}
  64%,69% {transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg)}
  81%,86% {transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg)}
  97%,100%{transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg)}
}

@keyframes b {
  0%,9%   {background: #774F38}
  14%,19% {background: #C5E0DC}
  31%,36% {background: #036564}
  45%,55% {background: #B38184}
  64%,69% {background: #424254}
  81%,86% {background: #4DBCE9}
  97%,to  {background: #774F38}
}