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
1
댓글 0개