CSS의 3D 변환(transform) 속성을 활용하면 자바스크립트 없이도 마우스를 올렸을 때 앞면과 뒷면이 뒤집히는 플립 카드(Flip Box) 효과를 쉽게 만들 수 있습니다. 핵심은 perspective, transform-style: preserve-3d, 그리고 backface-visibility 세 가지 속성입니다.
전체 예제 코드
<!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">
<h1>앞면 텍스트</h1>
</div>
<div class="cardBack">
<h1>뒷면 텍스트</h1>
</div>
</div>
</div>
<h2>위 카드에 마우스를 올리면 뒷면이 나타납니다</h2>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같이 하늘색 앞면이 있는 카드가 화면에 나타납니다.
카드 위에 마우스 커서를 올리면(Y축 기준 180도 회전) 뒷면이 보이며, 카드가 뒤집히는 것을 확인할 수 있습니다.
코드 동작 원리
1. perspective (원근감)
외부 컨테이너인 .flipCard에 perspective: 1000px를 지정하면 3D 공간의 깊이가 생겨 카드가 실제로 뒤집히는 듯한 입체적인 효과를 얻을 수 있습니다. 값이 작을수록 원근감이 강해집니다.
2. transform-style: preserve-3d
내부 요소인 .innerCard에 이 속성을 적용해야 자식 요소인 앞면과 뒷면이 같은 3D 공간에서 회전합니다. 이 속성이 없으면 3D 효과가 평면적으로 깨져 보일 수 있습니다.
3. backface-visibility: hidden
각 면에 이 속성을 지정하면 해당 면이 화면 반대쪽으로 돌아갔을 때 숨겨지므로, 앞면과 뒷면이 서로 겹쳐 보이지 않고 자연스럽게 전환됩니다.
4. hover 시 rotateY(180deg)
:hover 선택자로 내부 카드를 Y축 기준으로 180도 회전시키면, 미리 180도 회전되어 있던 뒷면(.cardBack)이 정면으로 향하게 되면서 뒤집기 효과가 완성됩니다. transition: transform 0.6s 덕분에 부드러운 애니메이션이 적용됩니다.
이 기법은 포트폴리오 카드, 팀원 소개, FAQ 아코디언, 제품 정보 카드 등 다양한 웹 UI에서 활용할 수 있습니다.