항상 이동->회전->확대  순서입니다.


.box1 {
  translate: 100px 50px;
  rotate: 45deg;
  scale: 1.2;
}



다음처럼 순서를 바꿔도 항상 이동->회전->확대  순서입니다.

.box1 {
  rotate: 45deg;
  translate: 100px 50px;
  scale: 1.2;
}

CSS 설계 원칙: 개별 속성은 선언 순서와 무관하게 translate → rotate → scale 순서로 적용되도록 규정됨 (CSS Transforms Level 2 명세).

왜 순서가 중요하냐면 회전(rotate) 후 이동(translate) vs 이동(translate) 후 회전(rotate)
좌표계가 변환되기 때문에 결과가 완전히 달라집니다!

순서를 변경하려면 transform 을 사용하세요.

.box1 {
  transform: translate(100px, 50px) rotate(45deg) scale(1.2);
}