카드 뒤집기

<article>
        <h2> ex) class </h2>
        <div class="card">
            <div>
                <p>
                    <span>?</span>
                    <span>01</span>
                </p>
            </div>
            <div>
            <p>
                <span>?</span>
                <span>02</span>
            </p>
        </div>
        <div>
            <p>
                <span>?</span>
                <span>03</span>
            </p>
        </div>
    </div>
</article>
<style>
article {width: 60%; margin: 200px auto;}
            
article > .card {display: flex; justify-content: space-between;}
article > .card > div{width: 200px; height: 300px;}
article > .card > div > p{margin:0; width:100%; height:100%; position:relative; transform-style: preserve-3d; transform-origin: center center; transition:.5s;}
article > .card > div.active > p{transform: perspective(600px) rotateY(-180deg);}
article > .card > div > p > span{position:absolute; left:0; top:0; width:100%; height:100%; background-color: #eee; display:flex; justify-content: center; align-items: center; font-size:5em;}
article > .card > div > p > span:nth-child(1){transform:  rotateY(0deg) translateZ(0px);}
article > .card > div > p > span:nth-child(2){transform: rotateY(-180deg) translateZ(0px);}    
</style>