너비와 높이를 설정되어있어야한다.
fransform: translate(left,top) rotate(rotation) scale(zoom);
이 순서로 안하면 계산이 아주 복잡해진다.
실제 적용은
zoom > rotate > translate로 동작한다.
즉, 오른쪽 부터 적용 된다.
fransform 선언 된 것 오른쪽 부터 적용 됨.
그래서
헷갈리는데
1. fransform: translate(left,top) rotate(rotation) scale(zoom);
2. fransform: scale(zoom) rotate(rotation) translate(left,top);
둘의 결과는 다를 수 있다.
1. 동작은
zoom 한 결과를 rotate 한 결과를 translate 함
이동이 없으므로 0,0 을 zoom 해봤자 영향이 없고, 0,0 에서 rotate 해봤자 영향이 없다. 실질 적으로 translate 만 영향을 미친다.
2. 동작은
translate 한 결과를 rotate 함 여기서 기준점이 0,0 이고 이동을 10,10 했다면? 0,0 기준으로 translate 한 포인트가 회전함
그리고 그 결과에서 다시 기준 점 기준으로 zoom 처리가 됨.
