[8주차] 16. 속성, 요소에 회전, 크기조절, 기울이기, 이동 효과 부여 가능 transform

transform-origin

- 회전 등을 할 때 이용할 원점의 위치를 지정하는 속성으로 이것만 사용하면 아무런 일도 일어나지 않는다.

  회전을 수행하는 transform : rotate(25deg) 등과 같이 사용해야 적용된다.

+ transform-origin: center;           회전의 기준점을 중앙으로 지정(디폴트)
+ transform-origin: top left;         회전의 기준점을 왼쪽 위 지점으로 지정
+ transform-origin: 50px 50px;    회전의 기준점을 왼쪽 위 지점에서 x축으로 50px, y축으로 50px 이동한 곳으로 지정
+ transform-origin : 20% 40%;    아마도 바로 위의 것과 비슷한듯

생략	{
	transform : rotate(25deg); /* 25도 기울여라*/
	
    
    /* */
    transform-origin: center; /* 회전축을 중앙으로 지정(디폴트)*/
    transform-origin: top left; /* 회전축을 왼쪽 위 지점으로 지정*/
    transform-origin: 50px 50px; /* 왼쪽 위 지점에서 x축으로 50px, y축으로 50px 이동한 점의 위치를 회전축으로 지정*/
    transform-origin : 20% 40%;    /* 회전축? 회전시킬때 기준점의 위치 변경 */
}

transform

+ transform: rotate(0.5turn); 0.5바퀴 회전시켜라

+ transform: scale(2, 3);    가로로 2배, 세로로 3배 크게 만들어라

+ ... 이거 말고도 많은데 프론트엔드 전문가 아니면 이정도만 하자.