[CSS] transform, transition

donggu·2021년 3월 14일
0
  • transform 속성을 사용하여 효과를 주고,
    transition 속성으로 효과를 제어한다.

transform

요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다.
  • translate(a, b)
    x축으로 a만큼, y축으로 b만큼 움직인다.
    a가 음수면 왼쪽, 양수면 오른쪽으로 간다
    b가 음수면 위쪽, 양수면 아래쪽으로 간다.

  • translateX, translateY
    한 축으로만 움직이고 싶을 때 사용한다.

  • scale(a, b)
    가로길이에 a를, 세로길이에 b를 곱한다.

  • scaleX(가로 길이에 곱하는 수), scaleY(세로 길이에 곱하는 수)

  • rotate(각도)
    요소를 주어진 각도만큼 시계방향으로 회전시킨다.

transition

CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다.
움직이는 동적 효과를 주기 위해 사용한다.
  • transition-property
    동적인 효과를 적용할 프로퍼티를 지정한다. (가로 길이, 세로 길이 등)

  • transition-duration
    동적인 효과가 진행되는 시간을 지정한다.

  • transition-timing-function
    효과의 진행속도를 조절한다. (점점 빠르게, 점점 느리게)

  • transition-delay
    요청을 받은 후 실제 실행할 때까지 지연시간을 설정한다.

profile
코딩하는 신방과생

0개의 댓글