CSS3 전환 및 2D 변환 - 검토

1.transition
구문: 전환: 속성 기간 타이밍-함수 지연;
전환 속성 전환 효과의 CSS 속성 이름 설정
구문: 전환 속성: 없음 | all | 속성
없음 전환 효과를 받는 속성이 없습니다.
모든 속성이 전환 효과를 얻습니다.
속성은 전환 효과를 적용하는 CSS 속성 이름 목록을 정의합니다. 목록은 쉼표로 구분됩니다.
들여쓰기 요소 속성 이름
전환 기간 전환 효과를 완료하는 데 걸리는 시간(초 또는 밀리초)
구문: 전환 기간: 시간
시간은 전환 효과를 완료하는 데 걸리는 시간을 지정합니다. . 기본값은 0이며, 이는 효과가 없음을 의미합니다
　　Transition-timing-function은 속도 효과의 속도 곡선을 지정합니다.
구문: 전환 타이밍 기능: 선형|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
선형은 동일한 속도를 지정합니다. 처음부터 끝까지의 전환 효과입니다.
Easy는 느린 속도로 시작하여 속도를 높이고 다시 느린 속도로 끝나는 것을 지정합니다.
　　　　　ease-in은 느린 속도에서 시작되는 과도한 효과를 지정합니다.
　　　　　ease-out은 느린 속도로 끝나는 과도한 효과를 지정합니다.
Ease-in-out은 느린 속도로 시작하고 끝나는 전환 효과를 지정합니다.
Cubic-bezier(n,n,n,n) 사용 가능한 값은 0과 1 사이의 값입니다.
Transition-delay 전환 효과가 시작되는 시기를 정의합니다.
구문: 전환 지연: 시간;
time은 전환 효과가 시작되기 전에 기다리는 시간을 지정합니다.

예:

　　

　　🎜>

1.295,0.000,1.610);}
.box:hover{width:500px;}
결과: 그림과 같습니다

예: (여러 변경사항을 함께 작성)
:red; 전환:1swidth,2s height,3s background;}
　　.box:hover{width:300px;height:150px; background:blue;}

변경의 의미는 CSS3에서 주로 변환에 포함됩니다. 다음 유형, 회전 회전, 기울이기, 크기 조정 및 변환 행렬
구문: 변환: 없음 | 　　　　　즉: 변환 : 회전 | 크기 조정 | 변환 | 행렬; 분리
회전, 크기 조정, 변환의 세 가지 유형이 있지만 과거에는 오버레이 효과가 쉼표(", "),

하지만 변환에서 여러 속성을 사용할 때는 공백으로 구분해야 합니다. 공백으로 구분된다는 점을 기억하세요. <…　　　　　　　 ureover - 지정된 각도 매개변수를 통해 원본 요소에 대한 2D 회전(2D 회전)을 지정해야 합니다. 변환 원본 속성을 먼저 정의해야 합니다. <…　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 in you in in in  turn . 설정값이 양수이면 시계방향 회전을 의미하고, 설정값이 음수이면 시계 반대 방향 회전을 의미합니다.

이동 번역
이동 번역은 세 가지 상황으로 구분됩니다. 번역(x,y)은 수평과 수직으로 동시에 이동합니다(즉, X- 축과 Y축 이동은 동시에), moveX(x)는 수평 방향으로만 이동합니다.　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　erator [🛛G. 세 가지 상황도 있습니다. scale(x,y)는 요소의 크기를 가로 및 세로로 동시에 만듭니다(즉, X축과 Y축의 크기를 동시에 조정함).
scaleY(y) 요소는 수직 방향(Y축 크기 조정)으로만 크기 조정되지만 크기 조정 중심점과 기준점은 동일합니다.
중심점은 요소의 중심 위치이며 스케일링 기준은 1입니다. 값이 1 요소보다 큰 경우 값이 1보다 작은 경우

동시에 요소가 비틀리고 변형됩니다. 특정 각도 값으로);skewX(x)는 요소를 수평 방향으로만 비틀고 변형합니다(X축 비틀림 및 변형)