전환과 변환

전환 (transition)

요소의 전상태와 후상태 사이의 효과를 지정

• 속성명(property)
• 지속시간(duration)
• 타이밍함수(timing-function)
• 대기시간(delay)

transition_property

전환효과의 속성이름 지정

• all : 기본값. 모든 속성에 적용
• 속성명 : 전환효과를 사용할 속성명

transition_duration

전환효과의 지속시간 지정

• 0 : 기본값. 지속시간 없음
• 숫자(초) : 해당 시간동안 지속

transition_timing_fuction

전환효과의 타이밍함수 지정

• ease : 기본값. 느리게-빠르게-느리게
• linear : 일정하게
• ease-in-out : 느리게-빠르게-느리게
• ease-in : 느리게-빠르게
• ease-out : 빠르게-느리게

transition_delay

전환효과가 몇 초 뒤에 시작할지 대기시간 지정

• 0 : 기본값
• 시간(초) : 해당 시간 후에 시작

변환 (transform)

원근법, 이동, 크기, 회전, 기울임 등으로 요소의 형태를 바꿈

2D 변환 함수

• translate(x,y) : (x,y) 만큼 이동
  • translate(x) : x축으로 x만큼 이동
  • translate(y) : y축으로 y만큼 이동
• scale(x,y) : (x,y) 만큼 크기 조정
• rotate(deg) : deg(각도) 만큼 회전
• skewX(x) : x만큼 x축으로 기울임
• skewX(y) : y만큼 y축으로 기울임

3D 변환 함수

• rotateX(x) : x축을 기준으로 회전
• rotateX(y) : y축을 기준으로 회전
• perspective(n) : n만큼 떨어진 거리에서 바라본 원근법. 변환 속성값중 가장 앞에 표기
• backface-visiblity : 3D 변환된 요소의 뒷면 숨김 여부
  • visible : 기본값. 뒷면을 보여줌
  • hidden : 뒷면을 숨김