JSFiddle - React, Tailwind, and code Playground

HTML

<div class="prisma">
<div class="a">
Ein Ring, sie zu knechten
sie alle zu finden
</div>
<div class="b">
Ins Dunkel zu treiben
und ewig zu binden
</div>
<div class="c">
Im Lande Mordor,
wo die Schatten droh'n
</div>
</div>

CSS

@keyframes orbit1 { 
  from { transform: perspective(3000px) rotate3d(0, 1, 0, 0deg)  translateZ(86px)} 
  to { transform:  perspective(3000px) rotate3d(0, 1, 0, 360deg) translateZ(86px) } 
}
@keyframes orbit2 { 
  from { transform: perspective(3000px) rotate3d(0, 1, 0, 0deg)  rotate3d(0, 1, 0, 120deg) translateZ(86px)} 
  to { transform:  perspective(3000px) rotate3d(0, 1, 0, 360deg) rotate3d(0, 1, 0, 120deg) translateZ(86px) } 
}
@keyframes orbit3 { 
  from { transform: perspective(3000px) rotate3d(0, 1, 0, 0deg)  rotate3d(0, 1, 0, 240deg) translateZ(86px)} 
  to { transform:  perspective(3000px) rotate3d(0, 1, 0, 360deg) rotate3d(0, 1, 0, 240deg) translateZ(86px) } 
}
.prisma div {
  width: 300px; height: 500px; box-sizing: border-box; padding: 2em; font-size: 2em;
  position:absolute; top: 50px; left: 100px;
  backface-visibility: hidden;
}
.a { background-color: red; animation: orbit1 10s infinite linear;}
.b { background-color: blue; animation: orbit3 10s infinite linear;}
.c { background-color: green; animation: orbit2 10s infinite linear;}

.a { transform: rotate3d(0, 1, 0, 0deg)  }
.b { transform: rotate3d(0, 1, 0, 120deg)  }
.c { transform: rotate3d(0, 1, 0, 240deg)  }
xxa { transform: }