JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<div class="scene">
        <div id="c1" class="o-card">
            U
        </div>
        <div id="c2" class="o-card">
            L
        </div>
        <div id="c3" class="o-card">
            R
        </div>
        <div id="c4" class="o-card">
            I
        </div>
        <div id="c5" class="o-card">
            C
        </div>
        <div id="c6" class="o-card">
            H
        </div>
    </div>

CSS

body {
            height: 100vh;
            margin: 0;
        }

        .scene {
            width: 30vh;
            height: 30vh;
            margin: 20vh auto;
            perspective: 1000px;
            transform-style: preserve-3d;
        }

        .o-card {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            font-size: 40vh;
            background-color: lightblue;
            position: absolute;
            left: 50%;
            top: 0;
            overflow: visible;
            border: 2px solid blue;
            transform-origin: 0 100%;
        }

        #c1 {
            transform: rotateZ(0) rotateY(-30deg);
        }

        #c2 {
            transform: rotateZ(60deg) rotateY(-30deg);
        }

        #c3 {
            transform: rotateZ(120deg) rotateY(-30deg);
        }

        #c4 {
            transform: rotateZ(180deg) rotateY(-30deg);
        }

        #c5 {
            transform: rotateZ(240deg) rotateY(-30deg);
        }

        #c6 {
            transform: rotateZ(300deg) rotateY(-30deg);
        }

JavaScript

var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
  card.classList.toggle('is-flipped');
});