rotate 함수

rotate() 함수는 요소를 지정된 각도로 회전시킵니다. transform 속성과 함께 사용됩니다. 속성 값은 각도 단위를 사용합니다. 양수 값은 시계 방향으로, 음수 값은 반시계 방향으로 회전시킵니다. 회전은 transform-origin 속성으로 지정된 점을 중심으로 수행됩니다.

구문

css선택자 {
  transform: rotate(각도);
}

예시

이 예시에서 블록은 시계 방향으로 30 도 회전합니다:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: rotate(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

예시

이 예시에서 블록은 반시계 방향으로 30 도 회전합니다:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: rotate(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

예시

이 예시에서 블록은 마우스를 올리면 1 바퀴 회전합니다. 회전 값이 1turn로 지정되었기 때문입니다 (같은 효과를 내려면 회전 각도를 360deg로 지정하면 됩니다). 부드러운 회전을 위해 transition 속성을 추가했습니다:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate(1turn);
}

Результат:

함께 보기