[CSS] 트랜스폼(Transform) 2D/3D 변형 기술

이번 포스팅에서는 [CSS 모션 심화] 파트의 세부 주제인 GPU를 활용하는 시각적 변형 기법에 대하여 상세히 알아보겠습니다.

1. Margin 대신 Translate를 써야 하는 성능적 이유

마우스를 올렸을 때 버튼이 위로 살짝 올라가는 효과를 margin-top: -5px; 로 구현하면 화면 전체 요소들의 위치를 다시 계산하는 리플로우(Reflow)가 발생하여 뚝뚝 끊길 수 있습니다. 반면 transform: translateY(-5px);는 레이아웃에 영향을 주지 않고 그래픽 카드(GPU)만 연산하므로 극도로 부드럽습니다.

.card {
  transition: transform 0.2s;
}
.card:hover {
  /* 레이아웃에 간섭하지 않고 허공에서 위로 5px 떠오름 */
  transform: translateY(-5px) scale(1.02);
}

2. 3D 카드 플립 효과의 원리와 Perspective

카드가 입체적으로 뒤집어지는 효과를 위해선 부모 요소에 '원근감'을 뜻하는 perspective를 주어야 3D 공간이 형성됩니다.

.flip-container {
  perspective: 1000px; /* 숫자가 작을수록 렌즈가 가까워져 왜곡이 심해집니다 */
}
.flip-card-inner {
  transition: transform 0.6s;
  /* 3D 회전 시 자식 요소들도 입체 공간을 공유하도록 설정 */
  transform-style: preserve-3d; 
}
.flip-container:hover .flip-card-inner {
  transform: rotateY(180deg); /* Y축을 기준으로 180도 획! 뒤집기 */
}
.flip-card-back {
  /* 뒷면이 뒤집혀 있을 때 거울처럼 반전되어 보이지 않게 숨김 처리 */
  backface-visibility: hidden; 
  transform: rotateY(180deg);
}

---

지금까지 하드웨어 가속을 받는 Transform 기법과 3D 변형 원리에 대해 살펴보았습니다. 동적인 애니메이션을 구현할 땐 항상 transform과 opacity를 최우선으로 고려하세요.