CSS의 transform 속성을 사용하면 HTML 요소에 2D 또는 3D 변환 효과를 손쉽게 적용할 수 있습니다. 이동(translate), 회전(rotate), 확대·축소(scale), 기울이기(skew) 등 다양한 변환 함수를 조합해 요소의 모양과 위치를 자유롭게 변경할 수 있습니다.
transform 속성이란?
transform 속성은 요소의 좌표 공간을 변경하여 시각적인 변형 효과를 만들어 줍니다. 레이아웃에 영향을 주지 않으면서 요소만 변환되기 때문에 애니메이션이나 인터랙티브한 UI를 구현할 때 매우 유용합니다.
주요 변환 함수
- rotate(deg) – 요소를 지정한 각도만큼 회전합니다.
- translate(x, y) – 요소를 X축, Y축 방향으로 이동시킵니다.
- scale(x, y) – 요소의 크기를 확대하거나 축소합니다.
- skew(x, y) – 요소를 지정한 각도만큼 기울입니다.
회전 예제 코드
아래 예제는 transform 속성의 rotate() 함수를 사용해 div 요소를 10도 회전시키는 코드입니다. 직접 실행해서 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: gray;
transform: rotate(10deg);
}
</style>
</head>
<body>
<h1>Rotation</h1>
<div>Demo</div>
</body>
</html>코드 설명
- div 요소의 크기를 가로 200px, 세로 100px로 지정하고 배경색은 회색으로 설정했습니다.
transform: rotate(10deg);구문이 핵심으로, 요소를 시계 방향으로 10도 회전시킵니다.- 음수 값(예:
rotate(-10deg))을 사용하면 반시계 방향으로 회전됩니다.
3D 변환도 가능합니다
transform 속성은 3D 변환도 지원합니다. rotateX(), rotateY(), rotateZ() 같은 함수를 사용하면 입체적인 효과를 만들 수 있으며, perspective 속성과 함께 사용하면 원근감까지 표현할 수 있습니다.
CSS transform은 성능이 우수하고 브라우저 호환성이 뛰어나기 때문에 버튼 hover 효과, 카드 플립 애니메이션 등 현대적인 웹 UI에서 널리 활용됩니다.