CSS rotateX(), 이거 하나면 3D 변환 끝. 실무 예제 3개로 완벽 이해

rotateX()가 뭐길래? 왜 필요할까?

웹 페이지에 단순히 평면적인 요소만 배치하는 시대는 지났습니다. 요즘 사용자들은 조금 더 몰입감 있는 인터랙션을 기대하죠. 그 중심에 있는 것이 바로 CSS 3D Transform입니다.

rotateX()는 요소를 X축(가로축)을 기준으로 회전시키는 함수입니다. 쉽게 말해, 요소의 위쪽이 뒤로 젖혀지거나 앞으로 숙여지는 효과를 줍니다. 마치 카드의 위쪽 가장자리를 잡고 앞뒤로 돌리는 느낌이라고 보시면 됩니다.

/* 기본 문법 */
.element {
  transform: rotateX(각도);
}

이 함수는 CSS Transforms Module Level 2 스펙에 정의되어 있으며, 모든 최신 브라우저에서 안정적으로 동작합니다.

핵심 포인트: rotateX()는 단독으로도 쓸 수 있지만, 진정한 3D 효과를 보려면 부모 요소에 perspective 속성을 반드시 함께 설정해야 합니다. perspective는 원근감을 추가해 요소가 3D 공간에 자연스럽게 존재하는 것처럼 보이게 만듭니다.

실전 예제 1: 클래식한 플립 카드 (Flip Card)

가장 대표적인 rotateX() 활용 사례는 호버나 클릭 시 카드가 뒤집히는 플립 카드입니다. 상품 소개, 팀원 프로필, 가격표 등에 활용하면 좋습니다.

HTML 구조

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h2>앞면</h2>
      <p>여기에 주요 정보를 표시</p>
    </div>
    <div class="flip-card-back">
      <h2>뒷면</h2>
      <p>추가 정보나 CTA 버튼을 배치</p>
    </div>
  </div>
</div>

CSS 핵심 코드

/* 부모 컨테이너: 원근감 설정 */
.flip-card {
  perspective: 1000px; /* 원근 거리: 숫자가 작을수록 왜곡이 심함 */
  width: 300px;
  height: 400px;
}

/* 내부 래퍼: 3D 공간 유지 */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; /* 자식 요소를 3D 공간에 배치 */
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 앞면과 뒷면 공통: 절대 위치 + 뒷면 숨김 */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 뒷면이 보이지 않도록 */
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flip-card-front {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

/* 뒷면: 미리 180도 회전시켜 숨겨둠 */
.flip-card-back {
  background: #2d3748;
  color: #edf2f7;
  transform: rotateX(180deg); /* ← 핵심! */
}

/* 호버 시 뒤집기 */
.flip-card:hover .flip-card-inner {
  transform: rotateX(180deg);
}

💡 팁: cubic-bezier()를 사용하면 기본 ease보다 더 탄력 있고 자연스러운 애니메이션을 만들 수 있습니다. 위 코드의 값은 '약간 튕기는' 느낌을 줍니다.

실전 예제 2: 3D 로딩 스피너

단순히 빙글빙글 도는 로딩 스피너 대신, X축과 Y축을 동시에 회전시키는 3D 스피너는 사용자의 시선을 사로잡습니다.

HTML

<div class="spinner-wrapper">
  <div class="spinner"></div>
</div>

CSS

.spinner-wrapper {
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.spinner {
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, #f093fb, #f5576c);
  border-radius: 16px;
  animation: spin-3d 2s ease-in-out infinite;
}

@keyframes spin-3d {
  0%   { transform: rotateX(0deg) rotateY(0deg); }
  25%  { transform: rotateX(180deg) rotateY(90deg); }
  50%  { transform: rotateX(180deg) rotateY(180deg); }
  75%  { transform: rotateX(360deg) rotateY(270deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

핵심 설명: transform 함수의 순서가 중요합니다. rotateX가 먼저 적용된 후 rotateY가 적용되므로, 25% 시점에서는 요소가 먼저 절반 뒤집힌 상태에서 옆으로 회전합니다. 이 순서 덕분에 부드러운 3D 회전이 가능합니다.

실전 예제 3: 아코디언 메뉴에 3D 효과 더하기

기존 아코디언은 max-height를 이용한 슬라이드 방식이 대부분이죠. 여기에 rotateX()를 조금 곁들이면 훨씬 고급스러운 느낌을 줄 수 있습니다.

HTML

<div class="accordion-item">
  <button class="accordion-header">섹션 1</button>
  <div class="accordion-content">
    <p>접었다 폈다 할 내용입니다. 위에서 아래로 펼쳐지는 듯한 3D 효과를 경험해보세요.</p>
  </div>
</div>

CSS

.accordion-item {
  perspective: 1000px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

.accordion-header {
  width: 100%;
  padding: 16px;
  background: #f7fafc;
  border: none;
  cursor: pointer;
  font-weight: 600;
  text-align: left;
}

.accordion-content {
  /* ★ 핵심: 위쪽을 기준으로 회전 */
  transform-origin: top;
  /* -90도: 완전히 접힌 상태 (사용자 쪽으로 숙여짐) */
  transform: rotateX(-90deg);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    transform 0.4s ease,
    opacity 0.3s ease,
    max-height 0.4s ease;
  padding: 0 16px;
}

/* 열렸을 때: 원래 위치로 */
.accordion-item.open .accordion-content {
  transform: rotateX(0deg);
  opacity: 1;
  max-height: 500px;
  padding: 16px;
}

⚠️ 주의: transform-origin을 top으로 설정해야 위에서부터 펼쳐지는 효과가 납니다. 기본값은 center이므로, 그대로 쓰면 요소의 중앙을 기준으로 회전해서 이상해 보일 수 있습니다.

주의사항 및 꿀팁

1. perspective는 부모에 설정하세요

perspective를 변환하려는 요소 자체에 직접 적용하면 생각한 대로 동작하지 않을 수 있습니다. 반드시 부모 요소에 설정해야 모든 자식이 동일한 원근감을 공유합니다.

2. transform-style: preserve-3d 잊지 마세요

자식 요소가 3D 공간에 올바르게 배치되도록 하려면 부모에 transform-style: preserve-3d를 설정해야 합니다. 이 속성이 없으면 모든 자식이 평면(2D)으로 펴져 버립니다.

3. backface-visibility: hidden의 함정

플립 카드에서 뒷면이 보이지 않도록 하려면 backface-visibility: hidden을 설정합니다. 하지만 이 속성은 요소가 완전히 180도 회전했을 때 뒷면을 숨기는 역할만 합니다. 중간 각도(예: 90도)에서는 요소가 거의 보이지 않게 되므로, 애니메이션 중간에 깜빡이는 현상이 발생할 수 있습니다. 이를 방지하려면 transform-style: preserve-3d와 함께 사용해야 합니다.

4. 성능 고려사항

3D Transform은 GPU 가속을 받기 때문에 일반적으로 성능이 좋습니다. 하지만 너무 많은 요소에 동시에 적용하거나, 복잡한 cubic-bezier 타이밍 함수를 사용하면 모바일 기기에서 버벅임이 발생할 수 있습니다. 가능하면 하드웨어 가속이 잘 동작하는 transform과 opacity 위주로 애니메이션을 구성하는 것이 좋습니다.

5. 접근성

회전 애니메이션은 일부 사용자(예: 전정기관 장애)에게 메스꺼움을 유발할 수 있습니다. prefers-reduced-motion 미디어 쿼리를 사용해 애니메이션을 줄이거나 아예 끄는 옵션을 제공하는 것이 좋습니다.

@media (prefers-reduced-motion: reduce) {
  .flip-card-inner,
  .spinner,
  .accordion-content {
    animation: none;
    transition: none;
  }
}

마무리: 실무에 바로 적용하기

rotateX()는 단순해 보이지만, perspective, transform-origin, backface-visibility와 조합하면 무궁무진한 활용이 가능합니다. 오늘 배운 세 가지 예제(플립 카드, 3D 스피너, 3D 아코디언)는 그 시작점에 불과합니다.

다음 단계로 도전해볼 만한 것들:

1. 3D 이미지 갤러리: 여러 카드를 원형으로 배치하고 rotateY()와 함께 사용하여 캐러셀 만들기
2. 3D 메뉴 네비게이션: 사이드바 메뉴가 3D로 펼쳐지는 효과
3. 데이터 시각화: 차트의 각 막대를 rotateX()로 회전시켜 3D 막대 차트 구현

이 글에서 사용한 예제 코드는 그대로 복사해서 프로젝트에 붙여넣어도 바로 동작합니다. 실제 프로젝트에 적용해보며 각 속성의 역할을 직접 체험해보세요.

함께 보면 좋은 글

• Catena-X와 AWS로 구현하는 진정한 데이터 주권 BASF·CircularTree의 PACIFIC 사례
• Claude Code, 진짜 잘 쓰는 개발자들의 4가지 비밀 전략

근거자료: CSS-Tricks rotateX() Almanac