CSS3 2D 변환(Transform)이란?
CSS3의 2D 변환(2D Transform)은 HTML 요소를 이동(translate), 회전(rotate), 확대·축소(scale), 기울이기(skew)하여 시각적 구조를 자유롭게 변경하는 기능입니다. JavaScript 없이 순수 CSS만으로 요소의 위치, 크기, 모양을 조작할 수 있어 웹 애니메이션, 인터랙티브 UI, 반응형 디자인에서 폭넓게 활용됩니다.
아래 표는 2D 변환에서 가장 많이 사용되는 주요 함수와 그 설명을 정리한 것입니다.
2D 변환 주요 함수 정리
| 번호 | 함수 및 설명 |
|---|---|
| 1 | matrix(n,n,n,n,n,n) 여섯 개의 값을 사용해 행렬(Matrix) 형태의 변환을 한 번에 정의합니다. |
| 2 | translate(x,y) x축과 y축 방향으로 요소를 동시에 이동시킵니다. |
| 3 | translateX(n) x축(가로) 방향으로만 요소를 이동시킵니다. |
| 4 | translateY(n) y축(세로) 방향으로만 요소를 이동시킵니다. |
| 5 | scale(x,y) 요소의 가로와 세로 크기를 동시에 확대하거나 축소합니다. |
| 6 | scaleX(n) 요소의 가로 크기만 변경합니다. |
| 7 | scaleY(n) 요소의 세로 크기만 변경합니다. |
| 8 | rotate(angle) 지정한 각도(deg)만큼 요소를 회전시킵니다. |
| 9 | skewX(angle) x축을 기준으로 요소를 기울이는(Skew) 변환을 적용합니다. |
| 10 | skewY(angle) y축을 기준으로 요소를 기울이는(Skew) 변환을 적용합니다. |
2D 변환 사용 예시
변환 함수는 transform 속성에 지정하며, 여러 함수를 조합해 사용할 수도 있습니다.
div {
transform: translate(50px, 100px) rotate(45deg) scale(1.5);
}위 코드는 요소를 오른쪽으로 50px, 아래로 100px 이동시킨 뒤, 45도 회전하고 크기를 1.5배 확대합니다. 이처럼 2D 변환 함수를 조합하면 복잡한 시각 효과도 간단하게 구현할 수 있습니다.