[전환]
*transition
-요소의 전환(시작과 끝) 효과를 지정하는 단축 속성
-transition: 속성명(transition-property) 지속시간(transition-duration) 타이밍함수(transition-timing-function) 대기시간(transition-delay);
-지속시간: 단축형으로 작성할 때, 필수 포함 속성!
*transition-property(속성명)
-전환 효과를 사용할 속성 이름을 지정
-all(초기값): 모든 속성에 적용
-속성이름: 전환 효과를 사용할 속성 이름 명시
*transition-duration(지속시간)
-전환 효과의 지속시간을 지정
-0s(초기값): 전환 효과 없음
-시간: 지속시간(s)을 지정
*transition-timing-function
-전환 효과의 타이밍(Easing) 함수를 지정
-ease(초기값): 느리게- 빠르게 - 느리게 = cubic-bezier(0.25, 0.1, 0.25, 1)
-linea: 일정하게 = cubic-bezier(0, 0, 1, 1)
-ease-in: 느리게 - 빠르게 = cubic-bezier(0.42, 0, 1, 1)
-ease-out: 빠르게 - 느리게 = cubic-bezier(0, 0, 0.58, 1)
-ease-in-out: 느리게 - 빠르게 - 느리게 = cubic-bezier(0.42, 0, 0.58, 1)
*transition-delay
-전환 효과가 몇 초뒤에 시작할지 대기시간을 지정
-0s(초기값): 대기시간 없음
-시간: 대기시간(s)을 지정
*transition-property 속성의 기본 값은?
-all
*transition 단축 속성의 필수 포함 속성은?
-지속시간(transition-duration)
[변환]
*deg
-deg 단위는 Degree 단어의 약어이다
*요소의 변환 효과
-transform: 변환함수1 변환함수2 변환함수3 ...;
-transform: 원근법 이동 크기 회전 기울임;
*2D 변환 함수
-px :
translate(x, y) : 이동(x축, y축)
translateX(x) : 이동(x축)
translateY(y) : 이동(y축)
sacle(x, y) : 크기(x.축, y축)
-deg :
rotate(degree) : 회전(각도)
skewX(x) : 기울임(x축)
skewY(y) : 기울임(y축)
*3D 변환 함수
-px :
perspective(n) : 원근법(거리)
-deg :
rotateX(x) : 회전(x축)
rotateY(y) : 회전(y축)
*perspective
-하위 요소를 관찰하는 원근 거리를 지정
-단위: px 등 단위로 지정
*perspective 속성과 함수 차이점
-perspective: 600px; => 관찰 대상의 부모(적용 대상) => perspective-origin(기준점 설정)
-transform: perspective(600px) => 관찰 대상(적용 대상) => tansform-origin(기준점 설정)
-perspective 함수보다는 속성을 사용하는 것을 권장!
*backface-visibility
-3D 변환으로 회전된 요소의 뒷면 숨김 여부
-visible(초기값): 뒷면 보임
-hidden: 뒷면 숨김
