cube.html

<style>
body{
  margin:0;
  height: 500px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.container{
  perspective: 1000px;
  perspective-origin: 100% 100%;
  > .cube{
    position:relative;
    width:200px;
    height:200px;
    transform-style: preserve-3d;
    animation: rotate3d 2s linear infinite alternate;
    // transform: rotateX(80deg) rotateY(180deg) rotateZ(360deg);
    
    > div{
      position:absolute;
      width:200px;
      height:200px;
      opacity:0.9;
      background: linear-gradient(to right, purple, red);
      
      &.s1{
        transform: translateZ(100px);
      }
      &.s2{
        transform: rotateY(90deg) translateZ(100px);
       
      }
      &.s3{
        transform: rotateY(180deg) translateZ(100px);
      }
      &.s4{
        transform: rotateX(90deg) translateZ(100px);   
        background-image:url("https://thispersondoesnotexist.com/");
        background-size: cover;
      }
      &.s5{
        transform: rotateY(-90deg) translateZ(100px);
      }
      &.s6{
        transform: rotateX(-90deg) translateZ(100px) rotate(180deg);
        background-image:url("https://mv.com.br/storage/solucaosessao/0900202024092666f54cd4a5517.webp");
        background-size: 100%;
        background-position: 4rem 6rem;
        background-repeat: no-repeat;
      }
    }
  }
}

// transform: rotateX(80deg) rotateY(180deg) rotateZ(360deg);

@keyframes rotate3d {
  // 100% {
  //   transform: rotateX(0deg) rotateY(360deg) rotateZ(360deg);
  // }
  0% {
    transform: rotateX(80deg) rotateY(180deg) rotateZ(360deg);
  }
  100% {
    transform: rotateX(120deg) rotateY(200deg) rotateZ(320deg);
  }
}
</style>

<pug>

.container
  .cube
    .s1
    .s2
    .s3
    .s4
    .s5
    .s6

</pug>