<div class="box">
   <div class="face top">
     <div class="top-1"></div>
     <div class="top-2"></div>
   </div>
   <div class="face bottom"></div>
  <div class="face back"></div>
  <div class="face front"></div>
  <div class="face left"></div>
  <div class="face right"></div>
</div>

body {
  margin: 0;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  
  perspective: 800px;
  perspective-origin: 50% -200px;
}

.box {
  --size: 100px;
  --strip-size: 20px;
  --strip-color: #FF8087;
  
  width: var(--size);
  aspect-ratio: 1;
  
  transform-origin: 50px bottom -50px;
  
  animation: rotate 4s linear infinite;
  position: relative;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  width: var(--size);
  aspect-ratio: 1;
  
  background-color: hsl(
    39,
    100%,
    var(--opacity)
  );
  
  transform-style: preserve-3d;
}

.face.front {
  --opacity: 66%;
}

.face.bottom {
  --opacity: 66%;
  
  top: 100%;
  
  transform-origin: top;
  transform: rotateX(-90deg);
}

.face.top {
  --opacity: 74%;
  bottom: 100%;
  
  background-color: unset;
  
  transform-origin: bottom;
  transform: rotateX(90deg);
  
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.top-1, .top-2 {
  position: relative;
  background-color: hsl(
    39,
    100%,
    var(--opacity)
  );
}

.top-1::after, .top-2::after {
  content: '';
  position: absolute;
  height: calc(var(--strip-size) / 2);
  width: 100%;
  background-color: var(--strip-color);
}

.top-1::after {
  bottom: 0;
}

.top-2::after {
  top: 0;
}

.top-1 {
  transform-origin: top;
  animation: open-1 6s linear infinite;
}

.top-2 {
  transform-origin: bottom;
  animation: open-2 6s linear infinite;
}

.face.back {
  --opacity: 78%;
  bottom: 200%;
  
  transform-origin: center 150px -50px;
  transform: rotateX(180deg);
}

.face.right {
   --opacity: 70%;

  left: 100%;
  
  transform-origin: left;
  transform: rotateY(90deg);
}

.face.left {
  --opacity: 70%;

  right: 100%;
  
  transform-origin: right;
  transform: rotateY(-90deg);
}

.face.left::after, .face.right::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--strip-color);
  width: var(--strip-size);
  height: var(--strip-size);
}

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

@keyframes open-1 {
  from {
    transform: rotateX(0);
  }
  80% {
    transform: rotateX(160deg);
  }
  to {
    transform: rotateX(0);
  }
}

@keyframes open-2 {
  from {
    transform: rotateX(0);
  }
  80% {
    transform: rotateX(-160deg);
  }
  to {
    transform: rotateX(0deg);
  }
}