22.04.21 transform, transition 속성을 알아보자!

transform 속성

• scale()
• rotate()
• translate()
• skew()

---

transform:scale() - X 또는 Y축으로 확대/ 축소

transform:scaleX(x축 비율);          // x축으로 확대, 축소
transform:scaleY(y축 비율);          // y축으로 확대, 축소
transform:scale(x축 비율, y축 비율);  // x축, y축으로 확대, 축소

transform:rotate() - 지정 요소 회전

transform:rotateX(Ndeg);  // x축 기준으로 N도 만큼 회전
transform:rotateY(Ndeg);  // y축 기준으로 N도 만큼 회전
transform:rotate(Ndeg);   // N도 만큼 회전

transform:translate() - 지정 요소 X 또는 Y축으로 이동

transform:translateX(10px);        // X축으로 10px 이동
transform:translateY(10px);        // Y축으로 10px 이동
transform:translate(-10px, -10px); // X축으로 -10px, Y축으로 -10px 이동

transform:skew() - 지정 요소 X 또는 Y축으로 기울이기

transform:skewX(Ndeg);             // x축으로 N도 만큼 기울이기
transform:skewY(Ndeg);             // y축으로 N도 만큼 기울이기
transform:skew(x축 Ndeg, y축 Ndeg); // x축, y축으로 N도 만큼 기울이기

---

transition

transition은 속성을 서서히 변화시키는 속성입니다.

• transition
• transition-delay 전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정함.
• transition-duration 전환(transition) 효과가 지속될 시간을 설정함.
• transition-property 요소에 추가할 전환(transition) 효과를 설정함.
• transition-timing-function 전환(transition) 효과의 시간당 속도를 설정함.

---

transition-delay

3초대기후 진행

transition-delay: 3s;

transition-duration

5초동안 진행

 transition-duration: 5s;

transition-property

기본값: all

width값만 지정시

transition-property: width;

transition-timing-function

linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int, start | end), cubic-bezier(n, n, n, n) 가 있다.

• linear
  상태가 선형으로 변화합니다. 즉, 애니메이션의 변화 속도가 처음부터 끝까지 동일합니다.

• ease
  처음에 천천히 시작하여 빨라지며, 마지막에 다시 느려집니다.
  ease-in-out과 동작이 동일하지만 ease 는 마지막 속도보다 시작 속도가 약간 더 빠릅니다.

• ease-in
  처음에 천천히 시작하여 마지막에 속도를 높여 끝납니다.

• ease-out
  처음에 빠른 속도에서 시작하여 마지막에 천천히 속도를 줄여 끝납니다.

• ease-in-out
  천천히 시작되어 정상 속도가 되었다가 마지막에 느려집니다.

---

transition 한번에 작성하기

.item { transition: all 0.2s ease-in-out; }