카드 앞면과 뒷면을 구현하기 위해서는 앞면 카드와 뒷면 카드를 각각 만들어서 겹쳐주어야 합니다.
=> card-front, card-back에 position: absolute css속성을 주어 겹치게 설정합니다.
<div class="card-wrapper"> <div class="card"> <div class='card-front'>Front</div> <div class="card-back">Back</div> </div> </div>
.card-wrapper { /*원근감을 위해 perspective 사용합니다.*/ perspective : 1200px; width: 180px; height: 230px; margin: 20px; } .card { position : relative; width:100%; height: 100%; /* 3d-효과를 주기위해 사용 속성이 있어야 반대 카드가 보입니다. */ transform-style: preserve-3d; transition : all 0.5s; cursor: pointer; } .card-front, .card-back{ /* 앞면과 뒷면 카드를 겹침*/ position: absolute; width: 100%; height: 100%; /* 뒷면을 보여주기 않기위해 속성이 없으면 그냥 뒷면만 보입니다.*/ backface-visibility: hidden; background-color: orangered; display: flex; justify-content: center; align-items: center; font-size: 30px; border-radius: 10px; color : white; font-weight: bold; } .card-back { background-color: powderblue; /* 뒷면의 카드를 180도 회전시킵니다.*/ /* 뒷면의 카드의 경우 뒤쪽에 위치해야 되기 때문입니다.*/ transform: rotateY(180deg); } .card:hover{ /* 호버시 카드 전체를 뒤집어 줍니다.*/ transform: rotateY(180deg); }