[CSS] Transform

transform/transition 속성 한줄정리

syntax

transform:rotate(360deg); >360도만큼 회전

transform:scale(1.2); >1.2배 확대

transform:scale(0.8); > 0.8배 확대

transform 객체의 움직임이나 형태 변화를 주는 CSS속성

translate(x,y)	객체를 x, y만큼 이동
translateX	객체를 x만큼 이동
trnslateY	객체를 y만큼 이동
scale(1.0)	객체의 크기를 n배만큼 확대/축소
scaleX	객체의 크기를 X축으로 확대/축소
scaleY	객체의 크기를 Y축으로 확대/축소
rotate(Xdeg)	객체를 X도만큼 회전
rotateX	객체를 X축을 기준으로 해당 값만큼 회전
rotateY	객체를 Y축을 기준으로 해당 값만큼 회전

transition 설명 기본값

transition-duration	transition의 진행 속성을 정하는 속성	0s
transition-timing-function	transition 효과를 위한 수치 함수를 지정하는 속성 (ex. ease, ease-in-out)	ease
transition-delay	transition의 시작을 연기하는 속성	0s
transition-property	transition의 대상이 되는 CSS 프로퍼티를 지정한다	all
transition	모든 transition 속성을 한번에 지정할 수 있는 속성

실전예제

---

1. X축으로 50px만큼 이동시키기 : transform:translateX(50px); / transform:translate(50px,0px);
2. X축으로 150px, Y축으로 30%만큼 이동시키기 : transform:translate(150px,30%);
3. 180도만큼 회전시키기 : transform:rotate(180deg);
4. 3배만큼 확대 시키기 : transform:scale(3.0);
5. X축 150px, Y축 30%만큼 이동 + 2배만큼 확대 : transform:translate(150px,30%) scale(2.0);

‼️ 여러개의 속성을 부여 할 때 쉼표가 있으면 작동되지 않는다. 띄어쓰기로 여러개의 속성 부여.