WebCSS

transition and transform

Transition(이전)과 Transform(변형) 이해하기

Trasition(전이)

  • 요소 박스에 지정된 속성이 점진적으로 변환하는 기능을 의미한다. 이 기능을 이용하면 속성이 변화하는 과정을 통해 애니메이션 효과가 적용되어 동적인 느낌을 줄 수 있다.

transition property 속성

  • 요소에 지정된 속성을 변환하고자 할 때 사용하는 속성. 속성 값으로 특정 CSS 속성을 지정하면 해당 속성만 변환되고, all을 지정할 경우 요소에 지정된 모든 속성이 변환된다.
  • 위 코드에서는 all을 지정하였다. 위 코드의 주석처리 된 부분이 all을 지정하였을 떄와 같은 결과 값을 가진다.

transition–duration 속성

  • 변환이 진행되는 시간을 지정하는 속성. 시간은 초 단위(s)로 지정
  • 위 코드에서는 2s로 지정하였다. 2초 동안 지정한 변환을 수행한다.

transition–delay 속성

  • transition-delay는 변환이 진행되기 전 지연되는 시간을 지정하는 속성. transition-duration 속성과 마찬가지로 지연 시간은 초 단위(s)로 지정. 이때 지연되는 시간은 진행 시간(transition-duration)에 포함되지 않는다.
  • 위 코드에서는 따로 지정을 하지 않았으나 ease-in 뒤에 2s 같은 초단위 값을 입력하면 된다.

transition–timing–function 속성

  • transition-timing-function은 속성이 변환될 때 진행 속도의 형태를 지정하는 속성.
  • 위 코드에서는 ease-in을 사용하였다. ease-in은 후반부로 갈수록 변환 시 진행 속도가 증가되는 형태이다.

transition 속성

  • transition은 transition 관련 속성 값들을 일괄 적용하는 대표 속성으로, transition 속성 값은 공백으로 구분하여 선언한다.
  • 위 코드에서는 대표속성인 transition 속성을 사용하여 일괄 적용하였다.

Transform(변형)

  • transform 관련 속성을 사용하면 요소 박스의 크기 변형 및 회전, 기울임 등을 지정할 수 있다.
  • 또한 평면상의 2차원 변형뿐만 아니라 3차원 변형도 가능. 이번 포스트에서는 2차원 변형에 대해서만 다룰 예정이다.

transform 속성

  • transform은 요소 박스를 변형하는 속성으로, 변형 형태별로 함수 타입의 속성 값을 지정한다. 이때 속성 값을 공란으로 구분하여 복수의 속성 값을 지정할 수 있다.

translate()

  • translate( ) 함수는 HTML 요소 박스를 평면상에서 수평 이동하는 기능이다. . translate( )로 이동된 요소는 다른 요소의 배치에 영향을 끼치지 않는다.

  • 위 코드에서는 x축 좌표로 150px 이동하는 translateX(150px) 함수가 사용되었다.

  • 1
    div { transform : scale(0.5, 0.5) ; }

  • 위와 같이 사용할 수도 있다.

scale()

  • scale( ) 함수는 HTML 요소 박스의 크기를 변형하는 기능이다. scale( ) 함수 역시 변경된 요소의 크기가 다른 요소 배치에 영향을 끼치지 않는다.

  • 위 코드에서는 본래 요소 박스 크기의 반만큼 작아지는 함수가 사용되었다.

rotate(angle)

  • rotate( ) 함수는 HTML 요소 박스를 평면상에서 회전하는 기능으로, 함수의 값으로 회전 각도(deg)를 지정할 수 있다.이 때 회전 각도가 양수 값일 경우에는 시계 방향으로 회전하고, 음수 값일 경우에는 반 시계 방향으로 회전한다. rotate( ) 함수 역시 박스가 회전되어 요소의 표시 영역이 변경되더라도 다른 요소의 배치에는 영향을 끼치지 않는다.
  • 위 코드의 rotate(1turn) 과 같이 사용 가능하다.

skew

  • skew( ) HTML 요소 박스의 기울임을 지정하는 기능이다. rotate( ) 함수와 마찬가지로 함수 값에 기울기의 각도(deg)를 지정할 수 있다. 박스가 회전되어 요소의 표시 영역이 변경되더라도 다른 요소의 배치에는 영향을 끼치지 않습니다.

  • 위 코드에서는 사용되지 않았다.

Share