JSFiddle - React, Tailwind, and code Playground

by antelopelovefan

HTML

<div class="container">
    <div class="word">
        <span class="c">w</span>
        <span class="c">h</span>
        <span class="c">a</span>
        <span class="c">t</span>
        <span class="c">e</span>
        <span class="c">v</span>
        <span class="c">e</span>
        <span class="c">r</span>
        <span class="c">c</span>
        <span class="c">h</span>
        <span class="c">a</span>
        <span class="c">r</span>
        <span class="c">l</span>
        <span class="c">i</span>
        <span class="c">e</span>
    </div>
</div>

CSS

.container {
  width: 210px;
  height: 140px;
  position: relative;
  perspective: 1000px;
}

.word {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

.word .c {
  display: block;
  position: absolute;
  width: 186px;
  height: 116px;
  left: 10px;
  top: 10px;
  border: 2px solid black;
}

.word figure:nth-child(1) { transform: rotateY(   0deg ); }
.word figure:nth-child(2) { transform: rotateY(  40deg ); }
.word figure:nth-child(3) { transform: rotateY(  80deg ); }
.word figure:nth-child(4) { transform: rotateY( 120deg ); }
.word figure:nth-child(5) { transform: rotateY( 160deg ); }
.word figure:nth-child(6) { transform: rotateY( 200deg ); }
.word figure:nth-child(7) { transform: rotateY( 240deg ); }
.word figure:nth-child(8) { transform: rotateY( 280deg ); }
.word figure:nth-child(9) { transform: rotateY( 320deg ); }
.word figure:nth-child(10) { transform: rotateY(   360deg ); }
.word figure:nth-child(11) { transform: rotateY(  0deg ); }
.word figure:nth-child(12) { transform: rotateY(  40deg ); }
.word figure:nth-child(13) { transform: rotateY( 80deg ); }
.word figure:nth-child(14) { transform: rotateY( 120deg ); }
.word figure:nth-child(15) { transform: rotateY( 160deg ); }

.word .c:nth-child(1) { transform: rotateY(   0deg ) translateZ( 288px ); }
.word .c:nth-child(2) { transform: rotateY(  40deg ) translateZ( 288px ); }
.word .c:nth-child(3) { transform: rotateY(  80deg ) translateZ( 288px ); }
.word .c:nth-child(4) { transform: rotateY( 120deg ) translateZ( 288px ); }
.word .c:nth-child(5) { transform: rotateY( 160deg ) translateZ( 288px ); }
.word .c:nth-child(6) { transform: rotateY( 200deg ) translateZ( 288px ); }
.word .c:nth-child(7) { transform: rotateY( 240deg ) translateZ( 288px ); }
.word .c:nth-child(8) { transform: rotateY( 280deg ) translateZ( 288px ); }
.word .c:nth-child(9) { transform: rotateY( 320deg ) translateZ( 288px ); }
.word .c:nth-child(10) { transform: rotateY( 360deg ) translateZ( 288px );...