안녕하세요! 프론트엔드 강사입니다.

웹 페이지를 만들다 보면 네모 반듯하고 평면적인 요소들을 회전시키거나, 기울이거나, 심지어 3D 공간에서 튀어나오게 만들고 싶을 때가 있죠? 이때 사용하는 마법 같은 기능이 바로 CSS 변형(Transforms)입니다.

오늘은 MDN 문서를 통해 요소를 2D와 3D로 자유자재로 다루는 방법을 알아보겠습니다. 실무에서 정말 많이 쓰이는 기능이니 잘 따라와 주세요!

---

CSS 변형 사용하기 (Using CSS transforms)

CSS 변형(transforms)은 요소의 좌표 공간을 변형하여, 일반적인 문서의 흐름(document flow)을 방해하지 않고 콘텐츠의 모양과 위치를 바꿀 수 있게 해줍니다.

👨‍🏫 강사님의 핵심 꿀팁:
"문서의 흐름을 방해하지 않는다"는 말이 아주 중요합니다! 어떤 요소를 transform으로 100px 이동시키거나 2배로 크기를 키워도, 그 요소의 원래 자리는 그대로 유지되며 주변 다른 요소들이 밀려나거나 레이아웃이 깨지지 않습니다. 오직 자기 자신만 둥둥 떠서 변형되는 것이죠! 애니메이션을 줄 때 margin이나 width 대신 transform을 써야 화면이 버벅거리지 않고 부드럽게 움직이는 이유가 바로 이 때문입니다.

CSS 변형은 HTML 요소에 아핀 선형 변환(affine linear transformations)을 적용하는 일련의 CSS 속성들을 통해 구현됩니다. 이러한 변형에는 평면(2D) 및 3D 공간에서의 회전(rotation), 기울이기(skewing), 크기 조절(scaling), 그리고 이동(translation)이 포함됩니다.

---

이 문서의 목차

• CSS 변형 속성 (CSS transforms properties)
• 예제 (Examples)
• 3D 전용 CSS 속성 (3D specific CSS properties)
• 같이 보기 (See also)

---

CSS 변형 속성 (CSS transforms properties)

CSS 변형을 정의하는 데에는 두 가지 주요 속성이 사용됩니다. 바로 transform과 transform-origin입니다. (최신 CSS에서는 transform 대신 개별 속성인 translate, rotate, scale을 독립적으로 사용할 수도 있습니다.)

• transform-origin (변형의 기준점)
  변형이 시작되는 원점(기준점)의 위치를 지정합니다. 기본적으로는 요소의 정중앙(center)으로 설정되어 있지만, 이를 원하는 곳으로 이동시킬 수 있습니다. 회전, 크기 조절, 기울이기 등은 기준점이 어디냐에 따라 완전히 다른 결과가 나오므로 매우 중요합니다. (예: 왼쪽 위 모서리를 핀으로 꽂고 회전시킬지, 정중앙을 축으로 팽이처럼 회전시킬지 결정)

• transform (변형 함수 지정)
  요소에 적용할 변형 함수들을 띄어쓰기로 구분하여 나열합니다. 여러 개를 나열하면 하나씩 순차적으로 적용되는데, 합성된 변형은 오른쪽에서 왼쪽 순서로 적용된다는 독특한 특징이 있습니다.

---

예제 (Examples)

회전하기 (Rotating)

아래는 MDN 로고의 원본 이미지입니다. 이 로고를 bottom left(왼쪽 아래) 모서리를 기준점 삼아 90도 회전시켜 보겠습니다.

img {
  rotate: 90deg; /* 구형 문법: transform: rotate(90deg); */
  transform-origin: bottom left; /* 왼쪽 아래 모서리를 축으로 삼습니다 */
}

기울이고 이동하기 (Skewing and translating)

이번에는 X축을 따라 10도 기울이고(skew), X축으로 150픽셀 이동(translate)시켜 보겠습니다.

img {
  transform: skewX(10deg) translateX(150px);
  transform-origin: bottom left;
}

👨‍🏫 강사님의 꿀팁:
transform 속성 안에 여러 함수를 연달아 쓸 때, 띄어쓰기로 구분해야 합니다. 콤마(,)를 쓰면 에러가 나니 주의하세요!

---

3D 전용 CSS 속성 (3D specific CSS properties)

2D 평면을 넘어 3D 공간에서 CSS 변형을 수행하는 것은 조금 더 복잡합니다. 가장 먼저 3D 공간에 원근감(perspective)을 부여해서 3D 공간을 구축(configure)해야 하고, 그다음 2D 요소들이 그 공간 안에서 어떻게 행동할지 설정해야 합니다.

원근감 (Perspective)

3D를 다룰 때 가장 먼저 설정해야 하는 요소는 바로 perspective입니다. 원근감은 우리에게 3D 입체감을 느끼게 해주는 필수 요소입니다. 뷰어(사용자)로부터 멀리 있는 요소일수록 더 작게 보이게 만들죠.

원근감 설정하기 (Setting perspective)

perspective 속성을 통해 요소가 얼마나 깊이감 있게(또는 급격하게) 줄어들거나 커질지 정의할 수 있습니다. 값이 작을수록 뷰어와 가까운 거리에 있는 것이라 원근감(왜곡)이 훨씬 심하고 다이나믹하게 나타나며, 값이 클수록 멀리서 망원렌즈로 보는 것처럼 왜곡이 적어집니다.

👨‍🏫 강사님의 중요 꿀팁:
perspective 속성은 변형을 일으킬 요소의 '부모 요소(컨테이너)'에 적용해야 자식 요소들이 같은 3D 공간을 공유하며 제대로 입체감을 가집니다! (개별 요소에 주려면 transform: perspective(500px) rotateX(...) 형태로 써야 합니다.)

아래 코드는 주사위(Cube)를 만들고, 컨테이너에 각각 다른 perspective 값을 준 예시입니다.

/* 부모 컨테이너에 원근감 부여 */
.perspective-250 { perspective: 250px; } /* 매우 극적인 3D 효과 */
.perspective-650 { perspective: 650px; } /* 완만하고 자연스러운 3D 효과 */

.cube {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; /* 자식 요소들도 3D 공간을 유지하도록 설정 */
}

/* 정육면체의 앞면, 뒷면 등 배치 */
.front { transform: translateZ(50px); }
.back  { transform: rotateY(180deg) translateZ(50px); }
/* ... 생략 ... */

원근감의 기준점 변경하기 (Changing the perspective origin)

perspective가 뷰어와 요소 사이의 거리를 설정한다면, perspective-origin 속성은 뷰어가 그 물체를 어느 각도(위치)에서 바라보고 있는지를 결정합니다.
기본값은 50% 50%(정면 중앙)이지만, 이를 변경해서 위에서 내려다보거나, 왼쪽 아래에서 올려다보는 듯한 앵글을 연출할 수 있습니다.

.po-tl { perspective-origin: top left; } /* 왼쪽 위에서 바라봄 */
.po-mm { perspective-origin: 50% 50%; }  /* 정중앙에서 바라봄 */
.po-br { perspective-origin: bottom right; } /* 오른쪽 아래에서 바라봄 */
.po-200200neg { perspective-origin: -200% -200%; } /* 아예 화면 밖 극단적인 위치에서 바라봄 */

---

여러분이 perspective와 3D transform이 어떻게 상호작용하는지 직접 눈으로 확인하실 수 있도록, 시각적으로 테스트해 볼 수 있는 인터랙티브 위젯을 준비했습니다. 아래의 슬라이더를 조절하며 3D 공간의 마법을 직접 경험해 보세요!

{"component":"LlmGeneratedComponent","props":{"height":"600px","prompt":"Create an interactive CSS 3D Transform visualizer using Three.js or standard CSS 3D DOM manipulation. The layout should have a dark, modern theme. Include a side panel with sliders for 'Rotate X' (0 to 360deg), 'Rotate Y' (0 to 360deg), 'Rotate Z' (0 to 360deg), 'Perspective' (100px to 1000px, default 500px), and 'Transform Origin X/Y' (0% to 100%). The main canvas should display a colorful 3D cube (with numbers 1-6 on the faces) that updates in real-time as the sliders are adjusted. Below the canvas, show a 'Code Output' section displaying the equivalent CSS rules (`transform: rotateX(...) rotateY(...) ...; perspective: ...; transform-origin: ...;`). Use high-contrast colors and smooth rendering to clearly illustrate how CSS 3D transforms manipulate coordinate space.","id":"im_286340c5fc8e1d34"}}

---

같이 보기 (See also)

• CSS transform 속성 및 CSS <transform-function> 데이터 타입
• 개별 변형 속성들: translate, rotate, scale (skew 속성은 따로 없습니다)
• 3D 변형과 디바이스 방향 이벤트 사용하기
• CSS 3D transforms 입문 (David DeSandro의 블로그)
• CSS Transform Playground (CSS 변형 함수를 시각화하는 온라인 툴)

---

수고하셨습니다! CSS의 2D/3D 변형은 처음엔 헷갈릴 수 있지만, 기준점(transform-origin)과 원근감(perspective)의 개념만 잘 잡으면 웹에 생명을 불어넣을 수 있는 최고의 무기가 됩니다. 위젯을 통해 충분히 감을 잡아보시고, 궁금한 점이 있다면 언제든 알려주세요. 다음 단계로 넘어가 볼까요?