CSS rotate() 함수로 웹 요소 회전하는 방법

CSS의 rotate() 함수는 요소를 지정한 각도만큼 회전시킵니다. 양수(+) 각도를 사용하면 시계 방향으로, 음수(-) 각도를 사용하면 반시계 방향으로 요소를 회전할 수 있습니다.

이번 글에서는 CSS로 요소를 회전하는 방법을 배워보겠습니다. 왜 요소를 회전해야 할까요? 요소를 회전하면 웹 페이지가 더욱 인터랙티브해지고, 적절히 활용하면 사이트의 미적 완성도까지 높일 수 있기 때문입니다.

요소 회전 기술은 CSS 툴박스에 꼭 갖춰두면 유용하게 쓸 수 있는 스킬입니다. 이 글을 읽으면서 실제 코드 예제를 함께 따라 해 보시길 추천합니다.

CSS rotate() 함수란?

CSS rotate() 함수는 2D 평면에서 요소를 회전시킬 수 있게 해줍니다. rotate() 함수는 인자를 하나만 받으며, 이는 요소를 회전시킬 각도(angle)입니다. 시계 방향과 반시계 방향 모두 지원합니다.

rotate() 함수의 기본 문법은 다음과 같습니다:

transform: rotate(angle);

여기서 "angle" 값은 요소가 회전할 각도(도 단위)를 의미합니다. 양수 값을 넣으면 시계 방향(예: 45), 음수 값을 넣으면 반대 방향(예: -39)으로 회전합니다.

rotate() 함수는 모든 HTML 요소에 적용할 수 있습니다. 예를 들어 텍스트 문단을 회전시키거나, 이미지를 회전시킬 수도 있습니다.

회전은 페이지가 렌더링되는 즉시 적용되기 때문에 눈으로 회전 과정을 확인할 수 없습니다. 회전 애니메이션을 실제로 확인하려면 CSS 트랜지션(transition)을 함께 사용해야 합니다. 트랜지션은 마우스 커서가 요소 위에 올라오는 것 같은 특정 동작이 발생했을 때 요소의 상태를 부드럽게 변경해 줍니다.

rotate() CSS 예제

이제 회전시킬 박스를 담을 HTML 페이지를 만들어 보겠습니다. div 요소로 박스를 하나 추가하고 클래스 이름을 "rotate"로 지정합니다.

<div class="rotate"></div>

다음으로 스타일을 추가해 보겠습니다:

div.rotate {
    width: 50px;
    height: 50px;
    background-color: chocolate;
}

새로고침해 보세요. 초콜릿 색상의 박스가 나타날 겁니다. 이제 rotate() 함수를 사용할 준비가 모두 끝났습니다.

박스를 회전시키려면 먼저 transform 속성에 대해 알아야 합니다.

CSS transform 속성은 이름 그대로 요소를 변형시키는 속성입니다. 여기에 적용할 수 있는 함수 중 하나가 바로 rotate()입니다. transform 속성에는 rotate 외에도 다양한 변형 함수를 사용할 수 있으며, 회전은 그중 하나일 뿐입니다.

rotate() 함수는 요소를 회전시킵니다. 인자는 하나뿐으로, 요소를 회전시킬 각도입니다. 이번에는 35도 양의 회전을 적용해 보겠습니다:

div.rotate {
    width: 50px;
    height: 50px;
    background-color: chocolate;
    transform: rotate(35deg); 
}

박스가 회전했습니다! 잘 따라오셨네요.

CSS transform rotate() 활용 사례

rotate()는 다양한 UI 아이디어나 이미지 회전에 활용할 수 있습니다. 예를 들어 이미지를 180도 회전시킨 후, 필요하다면 해당 이미지를 저장해서 다른 곳에 활용할 수도 있습니다.

텍스트도 회전할 수 있습니다. 잡지 스타일의 레이아웃을 만든다고 가정해 보면, 텍스트를 회전시켜 특정 텍스트 요소를 강조하는 효과를 낼 수 있습니다.

그리고 이것이 전부가 아닙니다. rotate() 함수로 정말 멋진 애니메이션도 만들 수 있습니다!

CSS :hover 선택자를 div에 적용해서 마우스를 올렸을 때 회전 효과가 나타나도록 만들어 보겠습니다:

.rotate:hover {
    transform: rotate(35deg); 
    background-color: deeppink;
}

정말 멋지지 않나요? 😎

이제 마우스를 박스 위에 올리면 박스가 회전합니다. background-color 속성을 함께 사용해 마우스 오버 시 박스 색상도 함께 바뀌도록 설정했습니다.

마무리

CSS rotate() 함수는 웹 요소를 지정한 각도로 기울여 표시합니다. 이 함수는 인자를 하나만 받으며, 요소를 회전시킬 각도를 나타냅니다. 양수와 음수 값 모두 사용할 수 있습니다.

요소를 회전하면 웹 페이지를 더욱 아름답게 꾸밀 수 있습니다. 예를 들어 사용자가 커서를 박스 위에 올렸을 때 회전 효과를 주거나, 링크에 마우스를 올렸을 때 링크를 회전시킬 수도 있습니다. 어떻게 활용할지는 여러분의 몫입니다!

CSS를 더 깊이 배우고 싶으신가요? 검증된 학습 자료와 전문가의 조언이 담긴 CSS 학습 가이드를 확인해 보세요.