CSS의 transform 속성은 웹 페이지의 요소에 2D 또는 3D 변형을 적용할 때 사용하는 강력한 도구입니다. 이 속성을 활용하면 요소를 회전(rotate), 확대·축소(scale), 기울이기(skew), 이동(translate)하는 등 다양한 시각적 효과를 간단한 코드만으로 구현할 수 있습니다.
transform 속성의 주요 변형 함수
transform 속성에는 여러 가지 변형 함수를 값으로 지정할 수 있으며, 대표적인 함수는 다음과 같습니다.
- rotate() — 요소를 지정한 각도만큼 회전시킵니다.
- scale() — 요소의 크기를 확대하거나 축소합니다.
- translate() — 요소를 X축 또는 Y축 방향으로 이동시킵니다.
- skew() — 요소를 지정한 각도만큼 기울입니다.
- matrix() — 여러 변형을 하나의 행렬로 결합하여 적용합니다.
transform 속성 사용 예제
아래 예제는 div 요소에 rotate(10deg)를 적용하여 요소를 시계 방향으로 10도 회전시키는 코드입니다. 직접 실행해 보면서 transform 속성의 동작 방식을 확인해 보세요.
<!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>
코드 설명
- width / height: div 요소의 너비와 높이를 각각 200px, 100px로 설정합니다.
- background-color: 배경색을 회색(gray)으로 지정하여 변형 효과를 눈에 잘 띄게 합니다.
- transform: rotate(10deg): 요소를 중심점을 기준으로 시계 방향으로 10도 회전시킵니다. 음수 값을 입력하면 반시계 방향으로 회전합니다.
활용 팁
transform 속성은 transition이나 animation 속성과 함께 사용하면 부드러운 애니메이션 효과를 만들 수 있습니다. 예를 들어, 마우스를 올렸을 때(hover) 요소가 자연스럽게 확대되거나 회전하는 인터랙션을 손쉽게 구현할 수 있습니다.