CSS3_02

1. 변환 속성: 변환: 값: 변환 함수(변환 함수)

2. 변환 원점: 기본 요소의 중심, 변환 원점 변경: 변환-원점: 값: 숫자/백분율/키워드;

3. 2D 변환: 속성: 변환: 값: ① 변위: 이동, y는 아래쪽으로 이동합니다.) ② 배율: 배율(값)/배율(x, y)/배율 X(x)/배율 Y( y); (* 스케일링 기능, 0~1 로 축소, >1 로 확대; ); 회전: 회전(n 도)(* n 은 시계 방향, 회전 후 좌표축 변경); (x도, y도)/X 기울기(x도)/Y 기울기(y도)

4. 3D 변환의 상위 속성: Perspective: value: px; ;);

5. 3D 변환: 속성: 변환: 값: ①3D 회전: a. X 회전(x도)/Y 회전(z도) b. n deg); (* x, y, z 값은 0 또는 1;); ② 3D 변위: Z(z)/translate3d(x, y, z) ③ 3D 디스플레이: 변환 스타일: 값: , flat (기본값, 2D 모양;); b, Preserve-3d (3D 요소 상태로 변환;) (* 공간 요소에 사용됨);

6. 전환: ① 전환 속성: 전환 속성: 값: 속성(css 속성 이름, 여러 개의 쉼표로 구분); ② 전환 시간: 전환 기간: 값: s/ms; 전환 타이밍 기능: 값: a, 완화(기본값, 느림 및 빠름); b, 선형(균일한 속도;) c, 완화(느림 및 빠름); d, 완화(빠름 및 느림) ;) ); e, easy-in-out (느리게, 빠르게, 느리게;); ④ 전환 지연 시간: 전환-지연: 값: s/ms; ⑤ 약어: 전환: 속성 기간 타이밍-함수 지연;

7. 애니메이션: ①애니메이션 선언: @keyframes 이름 { 0%{애니메이션 시작 상태}...50%{}...100%{애니메이션 종료 상태}} (* 호환성: @-webkit-keyframes 이름{}); ② 애니메이션 호출: a. 애니메이션 이름 속성: animation-duration: c. 애니메이션 지연: animation-delay:; 애니메이션 재생 횟수: animation-iteration-count: 값: 숫자 값/무한(무한 횟수) e. 애니메이션 재생 방향: animation-direction: 값: 일반(정방향)/역방향 )/alternate(홀수 양수 및 역방향); ③ 애니메이션 합성: 이름 기간 타이밍-함수 지연 반복-카운트 방향 ④ 애니메이션 재생 전후 채우기 상태: animation-fill-mode: 값: 없음/앞으로(이후) 완료 마지막 상태 유지)/뒤로(첫 번째 상태 유지 지연 시간)/모두; ⑤애니메이션 재생 상태: animation-play-state: 값: 일시 중지(일시 중지)/실행 중(재생)