css translate,rotate,scale 은 항상 순서가 고정입니다. > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

css translate,rotate,scale 은 항상 순서가 고정입니다. 정보

기타 css translate,rotate,scale 은 항상 순서가 고정입니다.

본문

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

.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);
}

추천
1

댓글 0개

전체 5,383
개발자팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT