<svg viewbox="0 0 115 50" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g class="angle">
    <path class="t-1" d="M.42 33.333l28.492-16.666V50L.42 33.333z" fill="#FDB617" />
    <path class="t-2" d="M57.404 33.333L28.912 16.667V50l28.492-16.667z" fill="#F69520" />
    <path class="t-3" d="M28.912 16.667L57.404 0v33.334L28.912 16.666z" fill="#F26A2D" />
    <path class="t-4" d="M85.887 16.667L57.395 0v33.334l28.492-16.667z" fill="#B61E42" />
    <path class="t-5" d="M57.395 33.333l28.492-16.666V50L57.395 33.333z" fill="#D91F5D" />
    <path class="t-6" d="M114.379 33.333L85.887 16.667V50l28.492-16.667z" fill="#B51F6B" />
  </g>
</svg>

html,
body {
  height: 100%;
}
body {
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
svg {
  width: 125px;
}
@keyframes flip-l {
  0%,
  70%,
  100% {
    transform: rotateY(90deg);
  }
  10%,
  60% {
    transform: rotateY(0deg);
  }
}

.t-1,
.t-3,
.t-5,
.t-2,
.t-4,
.t-6 {
  animation: flip-l 2s forwards infinite;
  backface-visibility: visible;
  perspective: 100px;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
}

.t-1 {
  transform-origin: 25%;
  animation-delay: -2.1s;
}
.t-2 {
  transform-origin: 25%;
  animation-delay: -1.98s;
}
.t-3 {
  transform-origin: 50%;
  animation-delay: -1.86s;
}
.t-4 {
  transform-origin: 50%;
  animation-delay: -1.74s;
}
.t-5 {
  transform-origin: 75%;
  animation-delay: -1.62s;
}
.t-6 {
  transform-origin: 75%;
  animation-delay: -1.5s;
}