이미지 회전, rotation, deg(각도)

rotation()

CSS함수 중에 rotation() 가 있다. 

인자의 각도, 양 만큼 회전 시켜 주는 함수이다.

인자에 들어가는 단위로 deg, turn, rad를 쓴다. 

일반적으로는 degree의 약자인 deg를 많이 사용하며,

우리가 아는 각도의 개념이다.

 

transform: rotate(0);

transform: rotate(90deg);

transform: rotate(-0.25turn);

transform: rotate(3.142rad);

 

 

HTML

  <div class="default_rotation">기본값</div>
  <div class="rotation">회전하기</div>

CSS

.default_rotation{
  width: 100px;
  height: 100px;
  background-color:lightblue;
}

.rotation {
  width: 100px;
  height: 100px;
  transform: rotate(45deg);
  background-color: pink;
}