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 . 설정값이 양수이면 시계방향 회전을 의미하고, 설정값이 음수이면 시계 반대 방향 회전을 의미합니다.
예: 변환:회전(30deg): 이동 번역
이동 번역은 세 가지 상황으로 구분됩니다. 번역(x,y)은 수평과 수직으로 동시에 이동합니다(즉, X- 축과 Y축 이동은 동시에), moveX(x)는 수평 방향으로만 이동합니다. erator [G. 세 가지 상황도 있습니다. scale(x,y)는 요소의 크기를 가로 및 세로로 동시에 만듭니다(즉, X축과 Y축의 크기를 동시에 조정함).
scaleY(y) 요소는 수직 방향(Y축 크기 조정)으로만 크기 조정되지만 크기 조정 중심점과 기준점은 동일합니다.
중심점은 요소의 중심 위치이며 스케일링 기준은 1입니다. 값이 1 요소보다 큰 경우 값이 1보다 작은 경우
동시에 요소가 비틀리고 변형됩니다. 특정 각도 값으로);skewX(x)는 요소를 수평 방향으로만 비틀고 변형합니다(X축 비틀림 및 변형)
number>) 6개 값(a, b, c, d, e, f) 변환 형식으로 2D 변환 지정 행렬은 가로 방향(X축)을 기준으로 [a b c d e f] 변환 행렬을 직접 적용하는 것과 같습니다. 요소를 세로 방향(Y축)으로 재배치하고 요소 변환 원점을 변경합니다. 함수는 변환 작업을 수행하기 전에 요소의 기준점 위치를 변경할 수 있도록 하는 것입니다.
요소의 기본 기준점은 중심 위치, 즉 변경을 위해 변환 원점을 사용하지 않는 경우입니다. 요소의 기준점 위치, 변환에 의해 수행되는 회전, 이동, 크기 조정, 기울이기, 행렬 등과 같은 작업은 모두 요소의 중심 위치를 기준으로 합니다. 예 : (회전)
> .box : 호버 {-webkit -transform : rotate (45deg);} 🎜
int background :red;margin:100px auto 0; 전환:2s;}
.box:hover{-webkit-transform:translate(-100px,200px);}
/p>
결과: 요소의 위치가 변경됩니다. 예: (확대)
.box: hover{webkit-transform:scale(2);}
>
int 0px auto 0; 🎜> .box:hover{-webkit-transform:skewX(45deg);}
🎜> 결과 : 그림과 같음
:80px;배경:빨간색;여백: 100px 자동 0; :2s;}
.box:hover{-webkit-transform:matrix(0.5,0.38,-0.38,2,0,0);}
111
결과: 그림과 같음
데모 示例:
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
