JSFiddle - React, Tailwind, and code Playground

HTML

<div class="schaufenster">
<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>
</div>

CSS

@keyframes orbitA {
   from  { transform: translateZ(0px) rotateX(  0deg) }
   16.7% { transform: translateZ(0px) rotateX(  0deg) }
   33.0% { transform: translateZ(0px) rotateX(120deg) }
   49.7% { transform: translateZ(0px) rotateX(120deg) }
   66.0% { transform: translateZ(0px) rotateX(240deg) }
   83.7% { transform: translateZ(0px) rotateX(240deg) }
   to    { transform: translateZ(0px) rotateX(360deg) }
}
/****************************************************************************/
/*ALLE PIXELANGABEN(px) SOLLTEN EIGENTLICH 
  'em'-Angaben oder sonstige fontabhängige sein
*/
.schaufenster {   /* Testblick von der Seite */
   width: 500px;   height: 200px;       /* AUF NAMENSKONFLIKTE ACHTEN !!   */
   position:absolute;    top: 200px;  left: 100px; /* Dimensionierung nicht   */
   background: rgba(100,100,100,0.4);             /* kleiner als für .a,.b,.c */
   transform: perspective(1200px) rotateY(45deg); 
   transform-style: preserve-3d;
   border: 3px solid black;
 }
.prisma {
   position:absolute; height: 200px; 
   animation: orbitA 12s infinite ease-in-out; transform-style: preserve-3d;
 }
.a { background: red       ; transform: translateZ(58px); }
.b { background: lawngreen ; transform: rotateX(120deg) translateZ(58px); }
.c { background: lightblue ; transform: rotateX(240deg) translateZ(58px); }
.a , .b , .c {
     text-align: center;                       /* Dimensione nicht  */
     width: 500px;          height: 200px;     /* kleiner als für   */
     position: absolute; top: 0; left:0;       /* .prisma           */
     display: flex; flex-flow: column nowrap; justify-content: center;
     xbackface-visibility: hidden;
}