CSS rotate() 함수 – 요소를 원하는 각도로 회전하기

CSS의 rotate() 함수는 HTML 요소를 지정한 각도만큼 회전시키는 변형(transform) 함수입니다. 매개변수로 회전 각도를 설정하며, 값은 도(degree), 라디안(radian) 등 다양한 단위로 지정할 수 있습니다.

rotate() 함수의 기본 문법

rotate() 함수는 transform 속성과 함께 사용되며, 양수 값은 시계 방향, 음수 값은 반시계 방향으로 요소를 회전시킵니다.

transform: rotate(45deg);

주요 단위는 다음과 같습니다.

deg: 도(360deg가 한 바퀴)
rad: 라디안
grad: 그레이드(400grad가 한 바퀴)
turn: 회전 수(1turn이 한 바퀴)

예제 코드

아래 예제에서는 여러 개의 문단 요소에 서로 다른 배경색을 적용하고, 마지막 요소에만 rotate() 함수를 사용해 45도 회전시켰습니다.

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {
   background-color:rgba(108,111,35,0.6);
   font-size:35px;
   color:yellow;
   transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>

실행 결과

위 코드를 실행하면 여러 크리켓 선수 이름이 각각 다른 배경색으로 표시되고, Australian Cricketers 텍스트는 노란색 글자와 함께 시계 방향으로 45도 기울어진 상태로 나타납니다.

CSS rotate() 함수 – 요소를 원하는 각도로 회전하기

정리

rotate() 함수는 요소를 회전시키는 가장 간단하고 직관적인 방법입니다. 버튼 hover 효과, 아이콘 애니메이션, 카드 디자인 등 다양한 UI 요소에 활용할 수 있으며, transition 속성과 함께 사용하면 부드러운 회전 애니메이션도 쉽게 구현할 수 있습니다.