CSS의 2D 변환(2D Transform) 함수는 웹 페이지의 요소에 회전, 이동, 크기 조절, 기울이기 등 다양한 2차원 변형 효과를 적용할 때 사용됩니다. 별도의 이미지 편집 없이 순수 CSS만으로 요소를 자유롭게 변형할 수 있어 현대적인 웹 디자인에서 널리 활용됩니다.
주요 2D 변환 함수
- translate() – 요소를 x축과 y축 방향으로 이동시킵니다.
- scale() – 요소의 크기를 x, y 방향으로 확대하거나 축소합니다.
- rotate() – 요소를 지정한 각도(degree)만큼 회전시킵니다.
- skew() – 요소를 x, y 방향으로 비스듬히 기울입니다.
CSS 2D 변환 함수 예제
다음은 네 가지 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, 0, 128);
border: 2px solid rgb(0, 35, 150);
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 example</h1>
<div class="rotate">ROTATE()</div>
<div class="skew">SKEW()</div>
<div class="scale">SCALE()</div>
<div class="translate">TRANSLATE()</div>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 각 div 요소에 서로 다른 변환이 적용된 모습을 확인할 수 있습니다. rotate(20deg)가 적용된 요소는 20도 회전하고, skew(20deg)가 적용된 요소는 기울어지며, scale(2, 1)은 가로 방향으로 두 배 확대되고, translate(30px, 20px)는 오른쪽 30px, 아래쪽 20px만큼 이동합니다.
함수별 문법 정리
- rotate(angle): 양수 값은 시계 방향, 음수 값은 반시계 방향으로 회전합니다.
- translate(x, y): 픽셀(px), 퍼센트(%) 등의 단위를 사용해 요소를 이동시킵니다.
- scale(x, y): 1보다 크면 확대, 1보다 작으면 축소됩니다.
- skew(x-angle, y-angle): 지정한 각도만큼 요소를 왜곡하여 기울입니다.
이처럼 2D 변환 함수는 개별적으로 사용할 수도 있고, transform: rotate(20deg) scale(1.5);처럼 여러 함수를 공백으로 구분해 동시에 적용하는 것도 가능합니다. 버튼 호버 효과, 카드 애니메이션 등 다양한 UI 인터랙션에 활용해 보세요.