CSS / 애니메이션 / transform / rotate - 2D 회전시키기

transform / rotate

  • transform의 rotate로 요소를 회전시킬 수 있습니다.
  • 평면에서의 회전입니다.
  • IE는 버전 10부터 지원합니다.

문법

  • angle에는 각의 크기를 입력합니다.
  • 단위는 deg, rad, grad, turn 등을 사용합니다.
  • turn은 1회전, 즉 360deg를 의미합니다.

예제

  • 마우스를 올렸을 때 회전합니다. 회전하는 과정을 보기 위해 transition 속성을 추가했습니다.
  • 각이 양수인 경우 시계방향으로 회전합니다.

  • 각이 음수면 반시계 방향으로 회전합니다.

  • 각이 크게 하여 빙글빙글 돌게 하는 효과를 줄 수 있습니다.