CSS3로 구현하는 요소의 2D 변환 완벽 가이드

CSS3 2D 변환이란?

2D 변환(2D Transform)은 CSS3에서 제공하는 강력한 기능으로, translate(이동), rotate(회전), scale(확대·축소), skew(기울이기) 등의 함수를 활용하여 HTML 요소의 위치와 형태를 자유롭게 변경할 수 있습니다.

주요 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) 요소의 너비만 변경합니다.
7	scaleY(n) 요소의 높이만 변경합니다.
8	rotate(angle) 지정한 각도만큼 요소를 회전시킵니다.
9	skew(x-angle, y-angle) x축과 y축을 따라 요소를 기울입니다.
10	skewX(angle) x축을 따라 요소를 기울입니다.
11	skewY(angle) y축을 따라 요소를 기울입니다.

CSS3 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(255, 17, 0);
    border: 2px solid black;
    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 변환</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)이 적용된 네 개의 사각형 요소를 화면에서 확인할 수 있습니다.

CSS3로 구현하는 요소의 2D 변환 완벽 가이드

마무리

2D 변환은 애니메이션 효과나 반응형 UI를 제작할 때 매우 유용하게 활용됩니다. transform 속성과 transition 속성을 함께 사용하면 마우스 오버(hover) 시 부드럽게 움직이는 버튼이나 카드 같은 인터랙티브한 요소도 손쉽게 구현할 수 있습니다.