JSFiddle - React, Tailwind, and code Playground

HTML

<div class="prisma">
<div class="a">VERSTEHEN SIE SPASS ?</div>
<div class="b">Hier könnte Ihre Werbung stehen</div>
<div class="c">Werbefläche</div>
</div>

CSS

@keyframes orbitA {
00% {transform: rotateX(  0deg) translateZ(58px) } /*    2t   */
16% {transform: rotateX(  0deg) translateZ(58px) }    /* Verweil */
33% {transform: rotateX(120deg) translateZ(58px) } /*flott b  */
49% {transform: rotateX(120deg) translateZ(58px) } /* 2t wart */
67% {transform: rotateX(240deg) translateZ(58px) } /* flott c */
83% {transform: rotateX(240deg) translateZ(58px) } /* 2t wart */
100%{transform: rotateX(360deg) translateZ(58px) } /* 2t wart */
}
@keyframes orbitB {
00% {transform: rotateX(120deg) translateZ(58px) translateY(00px)} /*    2t   */
16% {transform: rotateX(120deg) translateZ(58px) translateY(00px)}    /* Verweil */
33% {transform: rotateX(240deg) translateZ(58px) translateY(00px)} /*flott b  */
49% {transform: rotateX(240deg) translateZ(58px) translateY(00px)} /* 2t wart */
67% {transform: rotateX(360deg) translateZ(58px) translateY(00px)} /* flott c */
83% {transform: rotateX(360deg) translateZ(58px) translateY(00px)} /* 2t wart */
100%{transform: rotateX(480deg) translateZ(58px) translateY(00px)} /* 2t wart */
}
@keyframes orbitC {
  0% {transform: rotateX(240deg) translateZ(58px) translateY(00px)} /*    2t   */
 16% {transform: rotateX(240deg) translateZ(58px) translateY(00px)} /* Verweil */
 33% {transform: rotateX(360deg) translateZ(58px) translateY(00px)} /*flott b  */
 49% {transform: rotateX(360deg) translateZ(58px) translateY(00px)} /* 2t wart */
 67% {transform: rotateX(480deg) translateZ(58px) translateY(00px)} /* flott c */
 83% {transform: rotateX(480deg) translateZ(58px) translateY(00px)} /* 2t wart */
100% {transform: rotateX(600deg) translateZ(58px) translateY(00px)} /* 2t wart */
}/****************************************************************************/
/*ALLE PIXELANGABEN(px) SOLLTEN EIGENTLICH 
  'em'-Angaben oder sonstige fontabhängige sein
*/
.prisma {                                 /* Koordinatenbasis für .a .b .c   */
     width: 500px;   height: 200px;       /* AUF NAMENSKONFLIKTE ACHTEN !!  ...