CSS만으로 플립 카드 만드는 방법 (3D 회전 효과 구현하기)

CSS를 활용하면 자바스크립트 없이도 마우스를 올렸을 때 카드가 뒤집히는 3D 플립 카드 효과를 손쉽게 구현할 수 있습니다. 이 효과는 perspective, transform-style: preserve-3d, backface-visibility 같은 CSS3 속성들을 조합하여 만듭니다.

핵심 원리

플립 카드는 크게 세 부분으로 구성됩니다. 먼저 외부 컨테이너에 perspective: 1000px를 적용해 3D 공간감을 부여하고, 내부 래퍼에는 transform-style: preserve-3d를 설정해 자식 요소들이 3D 공간에서 회전할 수 있도록 합니다. 그리고 앞면과 뒷면 카드에는 backface-visibility: hidden을 지정하여 뒤집혔을 때 반대편 면이 보이지 않게 처리합니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin:20px;
    }
    .flipCard {
        background-color: transparent;
        width: 300px;
        height: 300px;
        perspective: 1000px;
    }
    .innerCard {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
    .flipCard:hover .innerCard {
        transform: rotateY(180deg);
    }
    .frontCard, .cardBack {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .frontCard {
        background-color: rgb(124, 225, 243);
        color: black;
    }
    .cardBack {
        background-color: #3329b9;
        color: white;
        transform: rotateY(180deg);
        font-size: 18px;
        font-weight: bold;
    }
</style>
</head>
<body>
<h1>카드 뒤집기 텍스트 예제</h1>
<div class="flipCard">
<div class="innerCard">
<div class="frontCard">
<img src="https://cdn.pixabay.com/photo/2016/04/01/11/25/avatar-1300331_960_720.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="cardBack">
<h1>James Anderson</h1>
<p>건축가</p>
<p>경력: 16년</p>
</div>
</div>
</div>
<h2>위 이미지에 마우스를 올리면 텍스트가 나타납니다</h2>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

CSS만으로 플립 카드 만드는 방법 (3D 회전 효과 구현하기)

이미지에 마우스를 올리면 카드가 Y축 기준으로 180도 회전하며 뒷면의 프로필 정보가 나타납니다.

CSS만으로 플립 카드 만드는 방법 (3D 회전 효과 구현하기)

주요 CSS 속성 설명

perspective: 1000px — 3D 변형 시 원근감(깊이)을 결정합니다. 값이 작을수록 더 극적인 입체 효과가 나타납니다.
transition: transform 0.6s — 카드가 뒤집히는 애니메이션의 지속 시간을 설정합니다.
rotateY(180deg) — 세로 축(Y축)을 기준으로 카드를 180도 회전시켜 뒷면을 보여줍니다.
backface-visibility: hidden — 요소의 뒷면이 화면에 보이지 않도록 숨겨, 앞면과 뒷면이 겹쳐 보이는 현상을 방지합니다.

이 기법은 팀 소개 페이지, 포트폴리오 카드, 제품 정보 카드 등 다양한 웹 UI에서 활용도가 높습니다. 호버 대신 클릭 이벤트로 동작하게 하려면 자바스크립트로 클래스를 토글하는 방식으로 확장할 수도 있습니다.