변형과 전환

✏️ transform 속성

transform 속성을 이용해 웹 요소에 변형을 적용
변형이란 요소의 크기나 위치를 바꾸는 것 (x축과 y축 기준)

CSS가 지원하는 변형 관련 함수

1️⃣ translate(x,y) : 지정한 크기만큼 x축, y축 방향으로 이동
px 단위로 사용

2️⃣ scale(x,y) : 지정한 크기만큼 x축, y축으로 확대 및 축소
숫자만 사용(n배)

3️⃣ skew(x,y) : 지정한 각도만큼 x축, y축으로 비틀어 왜곡
deg 단위로 사용

4️⃣ rotate(deg) : 지정한 각도만큼 회전
deg 단위로 사용

---

✏️ transition 속성

요소에 지정되어 있는 스타일 속성을 완전히 다른 스타일로 변화
변화 시간, 속도 등을 추가로 지정하여 다양한 애니메이션 효과도 만들 수 있음

transition 주요 하위 속성들

1. -property : 변화 대상 속성을 지정
2. -duration : 변화가 실행될 시간을 지정
3. -delay : 변화 시작 전 지연 시간을 지정
4. -timing-function : 변화 실행 시 실행 곡선 방식을 지정

transition 속성은 단축 속성

2개 이상의 transition 속성은 쉼표(,)로 구분

🔎 transition-timing-fuction 속성값

1. ease : 디폴트, 점점 속도가 빨라지다가 다시 느려지는 방식
2. linear : 처음부터 끝까지 같은 속도로 진행
3. ease-in : 느리게 시작했다가 점점 빨라짐
4. ease-out : 빠르게 시작했다가 점점 느려짐