css - 전환(transition) & 변환(transform)

전환(transition)

transition
요소의 전환(시작과 끝) 효과를 지정하는 단축 속성
- 속성명 지속시간 타이밍함수 대기시간;
# 지속시간은 단축형으로 작성할 때, 필수 포함 속성
## 속성 값을 여러 개 지정 가능

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

>> transition-property
전환 효과를 사용할 속성 이름을 지정
- all : 기본 값(모든 속성에 적용)
- 속성이름: 전환 효과를 사용할 속성 이름 명시

>> transition-duration
전환 효과의 지속시간을 설정
- 시간: 지속시간(s)을 지정

>> transition-timing-function
전환 효과의 타이밍(Easing) 함수를 지정
- ease : 기본 값 (느리게 - 빠르게 - 느리게)
- linear : 일정하게
- ease-in : 느리게 - 빠르게
- ease-out : 빠르게 - 느리게
- ease-in-out : 느리게 - 빠르게 - 느리게
## easing funtions mdn 사이트로 다양한 타이밍 함수를 볼 수 있다.
tweenmax easing

>> transition-delay
전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정

변환(transform)

>> transform
요소의 변환 효과

-> 2D 변환 함수
<px 단위>
- translate(x, y) => 이동(x축, y축)
- translateX(x) => 이동(x축)
- translateY(y) => 이동(y축)
- scale(x, y) => 크기(x축, y축) 숫자만 입력 시 배수로 처리 그리고 값을 하나만 넣으면 x, y 둘 다 적용

<deg(각도)>
- rotate(degree) => 회전(각도)
- skewX(x) => 기울임(x축)
- skewY(y) => 기울임(y축)

-> 3D 변환 함수
- rotateX(x) => 회전(x축)
- rotateY(y) => 회전(y축)
- perspective(n) => 원근법(거리) px 단위
# 원근법 함수는 제일 앞에 작성해야 한다.
거리의 값이 낮을수록 더 가깝게 느껴진다

>> perspective (속성) 함수 x
하위 요소를 관찰하는 원근 거리를 지정

# perspective 속성과 함수 차이점
속성은 perspective: 600px 관찰 대상의 부모,
함수는 transform: perspective(600px) 관찰 대상
기준점이 다르다 속성은 대상의 부모 요소에 기준점, 함수는 관찰 대상이 기준점을 가진다.
즉, 바라보는 위치가 다르다.

## 함수보단 부모 요소에 perspective 속성을 적용하는 걸 선호한다.

>> backface-visibility
3D 변환으로 회전된 요소의 뒷면 숨김 여부
- visible : 뒷면 보임(기본 값)
- hidden: 뒷면 안보임
ex) transform: rorateY(180deg)로 뒤집은 뒤 backface-visibility: hidden; 속성을 적용하면 요소가 안보이게 된다. (사라지는건 x, 단순히 뒷면이 안보이는 상태)