CSS3의 2D 변환(2D Transforms)은 요소의 위치나 형태를 이동(translate), 회전(rotate), 확대·축소(scale), 기울이기(skew) 등의 방식으로 변경할 때 사용됩니다. 이러한 변환 함수를 활용하면 별도의 JavaScript 없이도 순수 CSS만으로 다양한 시각적 효과를 구현할 수 있습니다.
주요 2D 변환 함수
CSS3에서 자주 사용되는 대표적인 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) 요소의 너비(width)만 변경합니다. |
2D 변환 함수 예제 코드
다음은 CSS3의 2D 변환 함수들을 실제로 적용한 예제입니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
width: 100px;
height: 100px;
background-color: rgb(98, 0, 255);
margin: 20px;
display: inline-block;
color: white;
}
.rotate {
transform: rotate(20deg);
}
.translate {
transform: translate(30px, 20px);
}
.scale {
transform: scale(2, 1);
margin-left:70px;
}
.skew {
transform: skew(20deg);
}
</style>
</head>
<body>
<h1>2D transform functions</h1>
<div class="rotate">ROTATE</div>
<div class="skew">
SKEW
</div>
<div class="scale">SCALE</div>
<div class="translate">TRANSLATE</div>
</body>
</html>실행 결과
위 코드를 실행하면 네 개의 보라색 사각형 요소가 각각 회전(ROTATE), 기울임(SKEW), 확대(SCALE), 이동(TRANSLATE) 효과가 적용된 상태로 화면에 출력됩니다.
- rotate(20deg): 요소가 시계 방향으로 20도 회전합니다.
- skew(20deg): 요소가 x축을 기준으로 20도 기울어집니다.
- scale(2, 1): 요소의 너비가 2배로 늘어나고 높이는 그대로 유지됩니다.
- translate(30px, 20px): 요소가 오른쪽으로 30px, 아래로 20px 이동합니다.
이처럼 transform 속성에 다양한 변환 함수를 조합하면 애니메이션 효과와 함께 더욱 풍부한 UI를 손쉽게 만들 수 있습니다.