<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>짝 맞추기</title>
<style>
.card {
display: inline-block;
margin-right: 20px;
margin-bottom: 20px;
width: 80px;
height: 100px;
perspective: 140px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.card.flipped .card-inner { /* 카드 뒤집기 클래스 */
transform: rotateY(180deg);
}