read : transform 의 순서 : 기술 #css #transform::공대여자홈

#css #transform

너비와 높이를 설정되어있어야한다.

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 처리가 됨.

No	제목	작성자	등록	조회
공지	[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)	공대여자	02/06 13:44	87693
공지	유용한 리눅스(LINUX) 명령어	공대여자	03/03 14:47	93363
공지	[공지] 기술 게시판	mins01	06/24 15:10	95795

일	월	화	수	목	금	토
4.26	4.27	4.28	4.29	4.30	5.1	5.2
5.3	5.4	5.5	5.6 ffmpeg 명령 샘플 new	5.7	5.8	5.9
5.10	5.11 도메인 등록 대행자 등록 수수료 및 서비스 new 1 첨부파일 다운로드 해더에서 파일명 지정 방법 new	5.12 x.com (구 트위터) - 트윗 특이사항 - 수정 내역 new	5.13	5.14	5.15	5.16
5.17	5.18	5.19	5.20	5.21	5.22	5.23
5.24	5.25	5.26	5.27	5.28	5.29	5.30
5.31	6.1	6.2	6.3	6.4	6.5	6.6