css translate,rotate,scale 은 항상 순서가 고정입니다.
항상 이동->회전->확대 순서입니다.
[code]
.box1 {
translate: 100px 50px;
rotate: 45deg;
scale: 1.2;
}
[/code]
다음처럼 순서를 바꿔도 항상 이동->회전->확대 순서입니다.
[code]
.box1 {
rotate: 45deg;
translate: 100px 50px;
scale: 1.2;
}
[/code]
CSS 설계 원칙: 개별 속성은 선언 순서와 무관하게 translate → rotate → scale 순서로 적용되도록 규정됨 (CSS Transforms Level 2 명세).
왜 순서가 중요하냐면 회전(rotate) 후 이동(translate) vs 이동(translate) 후 회전(rotate)
좌표계가 변환되기 때문에 결과가 완전히 달라집니다!
순서를 변경하려면 transform 을 사용하세요.
[code]
.box1 {
transform: translate(100px, 50px) rotate(45deg) scale(1.2);
}
[/code]
게시판 목록
개발자팁
개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 4946 | node.js | 6년 전 | 2614 | ||
| 4945 | node.js | 6년 전 | 2387 | ||
| 4944 | node.js | 6년 전 | 2524 | ||
| 4943 | node.js | 6년 전 | 2276 | ||
| 4942 | node.js | 6년 전 | 2257 | ||
| 4941 | node.js | 6년 전 | 2723 | ||
| 4940 | node.js | 6년 전 | 1869 | ||
| 4939 | node.js | 6년 전 | 1996 | ||
| 4938 | node.js | 6년 전 | 2461 | ||
| 4937 | node.js | 6년 전 | 2253 | ||
| 4936 | node.js | 6년 전 | 2326 | ||
| 4935 | node.js | 6년 전 | 2139 | ||
| 4934 | node.js | 6년 전 | 2448 | ||
| 4933 | node.js | 6년 전 | 2250 | ||
| 4932 | node.js | 6년 전 | 2690 | ||
| 4931 | node.js | 6년 전 | 2075 | ||
| 4930 | node.js | 6년 전 | 2001 | ||
| 4929 | node.js | 6년 전 | 8638 | ||
| 4928 | node.js | 6년 전 | 3755 | ||
| 4927 | node.js | 6년 전 | 2398 | ||
| 4926 | node.js | 6년 전 | 2507 | ||
| 4925 | node.js | 6년 전 | 2091 | ||
| 4924 | node.js | 6년 전 | 3376 | ||
| 4923 | node.js | 6년 전 | 2227 | ||
| 4922 | node.js | 6년 전 | 1995 | ||
| 4921 | node.js | 6년 전 | 2049 | ||
| 4920 | node.js | 6년 전 | 1769 | ||
| 4919 | node.js | 6년 전 | 2036 | ||
| 4918 | node.js | 6년 전 | 2183 | ||
| 4917 | node.js | 6년 전 | 2398 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기