7. transform과 transition

  transform

transform은 요소의 모양을 변화시키는 속성으로, 속성값은 다음 함수를 사용한다.

 

1. 위치 변환 - translate

• translate(x, y) - 현재 위치에서 x, y 만큼 이동
• translateX(x) - x축으로만 이동
• translateY(y) - y축으로만 이동

2. 각도 변환 - rotate(각도)

• 단위  deg
• 기본 회전 방향은 시계 방향
• minus 수치는 반시계 방향

3. 크기 변환 - scale

• 단위 없음 -> 배수로 변환
• scale(x, y) - 너비, 높이 둘다 변환
• scaleX(x) - x축으로만 변환
• scaleY(y) - y축으로만 변환

4. 기울기 변환 - skew(각도)

• 단위 deg
• skew(deg, deg) - x축, y축 모두 기울기 변환
• skewX(deg) - x축으로만 기울기 변환
• skewY(deg) - y축으로만 기울기 변환

5. 종합 변환 함수 - matrix

matrix(scaleX, skewY, skewX, scaleY, translateX, translateY) -> 크기, 기울기, 위치 변환을 합쳐놓은 함수

  transition

transform, 너비/높이 변화, 배경색 변화 등과 같이 사용하여 요소에 간단한 애니메이션 효과를 줄 수 있다.

 

1. transition-delay : 변환 시작 시간을 지연시킨다.

 

2. transition-duration : 변환 기간의 시간을 지정한다.

 

3. transition-property : 변환하는 속성을 지정한다.

 

4. transition-timing-function : 변환 기간의 시간을 함수로 처리한다.

• ease - 느린 시작, 빠른 진행, 느린 종료
• linear - 일정한 시간(기본값)
• ease-in - 느린 시작, 일정한 진행 및 종료
• ease-out - 일정한 시작 및 진행, 느린 종료
• ease-in-out - 느린 시작, 일정한 진행, 느린 종료

5.  transition : property, duration만 설정한다. 쉼표로 구분하여 여러 property에 속도를 지정할 수 있다.