CSS의 transform 속성을 사용하면 요소를 지정한 각도만큼 자유롭게 회전시킬 수 있습니다. 이번 글에서는 rotate() 함수를 활용해 HTML 요소를 회전하는 방법을 단계별로 살펴보겠습니다.
transform과 rotate() 함수란?
transform 속성은 요소의 크기, 위치, 모양 등을 변경하지 않고 시각적으로 변형할 때 사용합니다. 그중 rotate() 함수는 괄호 안에 입력한 각도(단위: deg)만큼 요소를 시계 방향으로 회전시킵니다. 예를 들어 rotate(20deg)는 요소를 20도 기울여 표시합니다.
구형 브라우저와의 호환성을 위해 벤더 접두사(vendor prefix)를 함께 작성하는 것이 좋습니다. Internet Explorer 9에는 -ms-, Safari 구버전에는 -webkit- 접두사를 붙입니다.
예제 코드
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>코드 설명
위 예제에서는 두 개의 div 요소를 생성했습니다. 첫 번째 div는 기본 상태 그대로 표시되고, 두 번째 div(id="myDiv")에는 rotate(20deg)가 적용되어 20도 회전됩니다.
- -ms-transform: Internet Explorer 9용 접두사
- -webkit-transform: Safari 및 구형 WebKit 기반 브라우저용 접두사
- transform: 표준 문법으로, 최신 브라우저 대부분에서 동작합니다.
실행 결과
브라우저에서 위 코드를 실행하면 첫 번째 박스는 그대로, 두 번째 핑크색 박스는 시계 방향으로 20도 기울어진 것을 확인할 수 있습니다.
참고 사항
회전 각도에 음수 값을 넣으면 반시계 방향으로 회전하며, rotateX(), rotateY(), rotateZ() 함수를 사용하면 특정 축을 기준으로 3D 회전도 가능합니다. 또한 transform-origin 속성을 함께 사용하면 회전의 기준점을 요소의 중심이 아닌 다른 위치로 변경할 수 있습니다.