GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

CSS 카드 뒤집기 애니메이션 9종 (복붙 20줄)

· Godrich · 9종 · 5분 읽기

피드백CSS만React호버클릭결제·쇼핑

CSS 카드 뒤집기는 마우스를 올리거나 클릭했을 때 카드가 휙 돌아가거나 반으로 접히면서 반대쪽 내용을 보여주는 애니메이션입니다. 코드를 몰라도 아래 데모에 마우스를 올려보면 바로 무슨 효과인지 알 수 있습니다.

가로 뒤집기01 flip-y-hover 세로 뒤집기(클릭)02 flip-x-click 반 접기03 fold-half 편지 펼치기04 unfold-letter 카드 더미 섞기05 flip-stack-shuffle 책장 넘기기06 flip-book-page 가격 공개 카드07 flip-reveal-price 4면 큐브08 flip-cube-4-faces 모션 줄임 판09 flip-reduced-motion

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

아홉 개는 인기 순이 아니라 기법이 단순한 것에서 복잡한 것으로, 마지막은 접근성으로 이어지는 순서를 따라갑니다. 가장 기본인 호버 뒤집기(01)와 클릭 뒤집기(02)를 지나, 종이처럼 접고 펼치는 아이디어형 변형(03~04)을 거쳐, 카드 여러 장을 다루는 실전 패턴(05~08)으로 이어지고, 마지막은 같은 동작을 모션을 줄여 재생하는 09번으로 마무리됩니다.

01가로 뒤집기

css 카드 디자인의 앞뒷면을 뒤집는다

카드에 마우스를 올리면 Y축을 중심으로 180도 회전해 뒷면이 드러납니다.

가로 뒤집기
새 창에서 열기

01 · 가로 뒤집기 — 측정 누적면적 13.071% · 움직인 프레임 7/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

rotateYperspectivebackface-visibility

어떤 카드에 쓰나

클릭 한 번 없이 마우스만 올려도 뒷면이 궁금한 카드에 씁니다.

.fy-card { perspective: 700px; }
.fy-card__inner {
  transform-style: preserve-3d;
  transition: transform $duration $easing;
}
.fy-card:hover .fy-card__inner { transform: rotateY(180deg); }
.fy-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.fy-card__face--back { transform: rotateY(180deg); }

02세로 뒤집기(클릭)

클릭하면 세로로 뒤집힌다

카드를 클릭하면 X축을 중심으로 세로로 뒤집혀 뒷면을 보여줍니다.

세로 뒤집기(클릭)
새 창에서 열기

02 · 세로 뒤집기(클릭) — 측정 누적면적 12.343% · 움직인 프레임 8/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

rotateXaria-pressedJS 6줄

터치 기기에서 확실한 이유

터치 기기는 호버가 없어 클릭·탭으로 발동하는 쪽이 확실합니다.

var btn = document.querySelector(".fx-card");
btn.addEventListener("click", function () {
  var open = btn.getAttribute("aria-pressed") === "true";
  btn.setAttribute("aria-pressed", String(!open));
  btn.classList.toggle("is-flipped", !open);
});

03반 접기

가운데 선을 기준으로 접힌다

카드가 가운데 선을 기준으로 반으로 접히며 내용이 안쪽으로 숨습니다.

반 접기
새 창에서 열기

03 · 반 접기 — 측정 누적면적 13.074% · 움직인 프레임 19/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

preserve-3drotateYtransform-origin

종이 카드를 닫듯이

종이 카드를 닫듯이 여닫을 때 씁니다.

.fh-half--fold {
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform $duration $easing;
}
@keyframes fh-fold {
  0%   { transform: rotateY(0); }
  50%  { transform: rotateY(-172deg); }
  100% { transform: rotateY(0); }
}
.fh-card.is-demo .fh-half--fold {
  animation: fh-fold ($duration * 2.4) $easing infinite;
}

04편지 펼치기

위아래 두 면이 순서대로

접혀 있던 카드가 편지를 펼치듯 위아래 두 면이 순서대로 펴지며 안의 내용이 드러납니다.

편지 펼치기
새 창에서 열기

04 · 편지 펼치기 — 측정 누적면적 26.174% · 움직인 프레임 11/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

rotateXtransition-delaytransform-origin: top

초대장을 여는 느낌

이벤트 초대장처럼 여는 느낌을 주고 싶을 때 씁니다.

.ul-flap--top { transform-origin: top center; }
.ul-flap--bottom { transform-origin: bottom center; }
.ul-scene.is-demo .ul-flap--top {
  animation: ul-open-top ($duration * 2.6) $easing infinite;
}
.ul-scene.is-demo .ul-flap--bottom {
  animation: ul-open-bottom ($duration * 2.6) $easing infinite;
  animation-delay: 120ms;
}

05카드 더미 섞기

맨 위 카드가 물러난다

쌓여 있는 카드 더미에서 맨 위 카드가 뒤집히며 물러나 다음 카드가 보입니다.

카드 더미 섞기
새 창에서 열기

05 · 카드 더미 섞기 — 측정 누적면적 10.424% · 움직인 프레임 10/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

z-indexrotateYtranslateZ

리뷰를 넘겨볼 때

리뷰나 추천 카드를 순서대로 넘겨볼 때 씁니다.

.ss-card--2 { transform: translateZ(-16px) translateY($sp-2); opacity: .85; }
.ss-card--3 { transform: translateZ(-32px) translateY($sp-4); opacity: .65; }
@keyframes ss-shuffle {
  0%, 30%   { transform: translateZ(0) translateX(0) rotateY(0); opacity: 1; }
  70%       { transform: translateZ(-8px) translateX(-46px) rotateY(-150deg); opacity: .25; }
  71%, 100% { transform: translateZ(0) translateX(0) rotateY(0); opacity: 1; }
}
.ss-stack.is-demo .ss-card--1 { animation: ss-shuffle ($duration * 6) $easing infinite; }

06책장 넘기기

오른쪽 끝을 축으로

카드 오른쪽 끝을 기준으로 책장을 넘기듯 회전하며 다음 카드가 드러납니다.

책장 넘기기
새 창에서 열기

06 · 책장 넘기기 — 측정 누적면적 16.329% · 움직인 프레임 9/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

rotateYtransform-origin: rightbox-shadow

그림자가 같이 움직인다

그림자가 함께 움직여 종이가 들리는 느낌을 줍니다.

.bp-page {
  transform-style: preserve-3d;
  transform-origin: right center;
  transition: transform $duration $easing, box-shadow $duration $easing;
}
.bp-page__face { backface-visibility: hidden; }
.bp-page__face--back { transform: rotateY(180deg); }
.bp-book.is-demo .bp-page {
  animation: bp-turn ($duration * 2.6) $easing infinite;
}

07가격 공개 카드

뒷면에 할인가가 뜬다

카드에 마우스를 올리면 뒤집히며 할인된 가격이 뒷면에 나타납니다.

가격 공개 카드
새 창에서 열기

07 · 가격 공개 카드 — 측정 누적면적 12.062% · 움직인 프레임 7/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

rotateYbackface-visibility: hidden180ms

한 카드에서 비교한다

정가와 할인가를 한 카드에서 비교할 때 씁니다.

.rp-card__inner {
  transform-style: preserve-3d;
  transition: transform $duration $easing;
}
.rp-card:hover .rp-card__inner { transform: rotateY(180deg); }
.rp-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.rp-card__face--back { transform: rotateY(180deg); }

084면 큐브

네 면을 가진 카드

카드 하나가 정육면체처럼 네 면을 가지고 있어, 클릭할 때마다 한 면씩 돌아갑니다.

4면 큐브
새 창에서 열기

08 · 4면 큐브 — 측정 누적면적 12.789% · 움직인 프레임 12/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

preserve-3dtranslateZrotateY

한 카드에 다 담을 때

이미지·설명·가격·구매 버튼을 한 카드 안에 담을 때 씁니다.

var cube = document.querySelector(".cb-cube");
var step = 0;
cube.addEventListener("click", function () {
  step = (step + 1) % 4;
  cube.style.setProperty("--cb-step", String(step));
});

09모션 줄임 판

회전 대신 교차 페이드

같은 카드 뒤집기를 prefers-reduced-motion이 켜진 환경에서 재생하면 회전 대신 부드러운 교차 페이드로 바뀝니다.

모션 줄임 판
새 창에서 열기

09 · 모션 줄임 판 — 측정 누적면적 10.497% · 움직인 프레임 20/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

prefers-reduced-motionopacitytransition

전환을 직접 보여준다

이 항목은 그 전환을 직접 보여줍니다.

@media (prefers-reduced-motion: reduce) {
  .rm-card:hover .rm-card__inner { transform: none; transition: none; }
  .rm-card:hover .rm-card__face--front {
    opacity: 0;
    transition: opacity $dur-base $ease-out;
  }
  .rm-card:hover .rm-card__face--back {
    opacity: 1;
    transform: none;
    transition: opacity $dur-base $ease-out;
  }
}

카드 뒤집기 애니메이션은 어디서 깨지는가

90도 직전에 비치는 글자

가장 먼저 눈에 걸린 건 03번 반 접기였습니다. backface-visibility: hidden을 걸어 두면 뒷면은 확실히 숨지만, 회전각이 정확히 90도에 가까운 프레임에서는 앞면이 아직 완전히 사라지기 전이라 원근에 짓눌린 아주 가는 글자 한 줄이 살짝 비쳐 보입니다 — hidden은 면이 90도를 넘어야 완전히 사라지고, 그 직전까지는 원래 각도 그대로 그려지기 때문입니다(MDN backface-visibility 문서 참고).

translateZ 값이 어긋나면

08번 큐브도 비슷한 함정이 있는데, 네 면을 이어 붙일 때 쓰는 translateZ 값이 카드 한 변의 절반과 정확히 같지 않으면 면과 면 사이에 얇은 틈이 생기거나 서로 겹쳐 보입니다. 아홉 개 파일이 담긴 zip의 압축 비밀번호는 zmahx9ys이고, 압축을 풀면 vanilla 폴더와 react 폴더가 각각 들어 있습니다.

접근성 — 아홉 개가 reduced-motion에서 남기는 것

항목마다 다른 반응

시스템에서 동작 줄이기를 켜면 반응이 항목마다 다릅니다. 01·02·07번은 transform: none !important로 뒤집기 자체가 막혀, 호버·클릭을 해도 뒷면이 아예 안 보이고 앞면에 그대로 머뭅니다 — 뒷면 정보가 필요하다면 별도 버튼 등 다른 경로를 둬야 합니다.

08번은 전환만 꺼진다

08번은 클릭으로 상태가 바뀌는 것 자체는 그대로 두고 부드러운 전환만 꺼서, 클릭하면 순간적으로 툭 바뀝니다. 03·04·05·06번은 애초에 호버·클릭 트리거가 없는 자동 재생 루프뿐이라 동작 줄이기와 함께 꺼지는 대상 자체가 없습니다.

09번이 푸는 방식

09번은 이 대응 자체가 주제라, 회전 대신 opacity 교차 페이드만 남기는 모습을 항상 보여주도록 만들었습니다. 카드 뒤집기 말고 다른 피드백 애니메이션이 궁금하다면 가격표 애니메이션 9종도 참고할 만하고, 전체 목록은 피드백 애니메이션 카테고리에서 모아 볼 수 있습니다.

FAQ — 자주 묻는 질문

css 카드 애니메이션은 모든 브라우저에서 똑같이 보이나요?

rotateY·rotateX와 preserve-3d는 최신 Chrome·Edge·Safari·Firefox에서 모두 동작합니다. 다만 아주 오래된 브라우저에서는 3D 회전 없이 카드 내용이 그냥 바뀌어 보일 수 있어, 결제처럼 중요한 화면에는 클릭으로도 같은 정보를 볼 수 있는 대안을 함께 두는 편이 안전합니다.

JS 없이 카드를 뒤집을 수 있나요?

네, 01·07번처럼 :hover로 발동하는 카드는 CSS만으로 충분합니다. 뒤집힌 상태를 계속 기억해야 하는 02·08번은 클릭할 때마다 상태를 저장해야 해서 자바스크립트 6~8줄이 필요합니다.

zip 안의 vanilla와 react 코드가 서로 다른가요?

화면에서 보이는 움직임 자체는 같습니다. vanilla 쪽은 SCSS 파일 맨 위에서 duration·easing·color 세 변수를 직접 고치고, react 쪽은 같은 값을 컴포넌트 props로 넘겨받아 --duration 같은 CSS 커스텀 속성에 연결한다는 점만 다릅니다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.