CSS3 4가지 속성 분석(변형, 전환, 애니메이션, 연관)

1. 변환

변환: 요소 개체를 회전, 크기 조정, 이동, 기울이기 및 행렬 변환할 수 있습니다.
예:

transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);
/*矩阵变形*/
matrix(<number>,<number>,<number>,<number>,<number>,<number>);
/*透视*/
perspective(length);

transition: 전환 속성

전환: 전환 효과의 CSS 속성 이름입니다. 효과 시작 시간;

transition: property duration timing-function delay;
/*示例*/
transition:1s ease all;
-webkit-tansition:1s ease all;
-moz-transition:1s ease all;
-o-transition:1s ease all;

rotate(): 2차원 공간에서 요소를 회전합니다.

요소에 원근감 값이 설정된 경우,rotate3d()를 사용하여 3차원 공간에서 회전을 달성할 수 있습니다.

rotateX(angele)/*相当于rotate3d(1,0,0,angle)指定在三维空间内的X轴旋转*/
rotateY(angele)/*相当于rotate3d(0,1,0,angle)指定在三维空间内的Y轴旋转*/
rotateZ(angele)/*相当于rotate3d(0,0,1,angle)指定在三维空间内的Z轴旋转*/

scale()

scaleX(<number>)/*只在X轴（水平方向）缩放元素*/
scaleY(<number>)/*只在Y轴（垂直方向）缩放*/
scaleZ(<number>)/*只在Z轴缩放，前提：元素设定透视值*/

translate([,]): 움직임은 변위량입니다.

translateX(<translation-value>);/*只在X轴（水平方向）移动*/
translateY(<translation-value>);/*只在Y轴（垂直方向）移动*/
translateZ(<translation-value>);/*只在Z轴移动，前提：元素设置透视值*/

skew(): Skew

skewX(<angle>);/*只在X轴（水平）倾斜*/
skewY(<angle>);/*只在Y轴（垂直）倾斜*/

matrix(a,c,e,b,d,f): 행렬 변형, c , e의 값은 사인 또는 코사인 값으로 표시됩니다.

a: X축 크기 조정
c: Y축 기울기
e: SkewX()
d: TranslateX() 🎜 >

transition-property

: 전환 속성

transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);

transition-duration: 전환 시간transition-delay: 지연 시간, 음수인 경우 전환 동작 It 이 시점부터 표시되며 이전 작업은 잘립니다. 전환 타이밍 기능: 전환 효과, 기본 용이함.

.wrap{
    perspective:1000px; 
}
.wrap .child{
    transform:perspective(1000px);
}

3. Animation

animation-name
: 애니메이션 이름, @keyframes 규칙과 함께 사용해야 합니다. @keyframes 로 정의됩니다. 여러 속성 값이 제공되는 경우 쉼표로 구분하세요.

@keyframes

는 네임스페이스에 해당하며 뒤에 명사가 옵니다. 클래스의 animation-name이 해당 이름을 정의하면 애니메이션이 실행될 수 있습니다. 애니메이션을 정의할 때 from 및 to 키워드를 직접 사용하여 한 상태에서 다른 상태로 전환할 수 있습니다.

transition-property:all;/*针对所有元素都有过度效果*/
transition-property:none;/*没有元素有过度效果*/
transition-property:ident;/*指定css属性有过度效果，例如width*/

animation-duration
: 애니메이션 시간

animation-timing-function: 재생 방법, 값은 다음과 같습니다.

용이성: 용이성 효과, 큐빅-베지어(0.25,0.1,0.25,1.0) 함수, 즉 큐빅 베지어와 동일합니다. linear: 선형 효과ease-in: 페이드 아웃 효과

ease-out: 페이드 아웃 효과

ease-in-out: 페이드 아웃 효과step-start: 점프 이제 애니메이션 종료 상태로 이동step-end: 애니메이션 시작 상태를 유지합니다. 애니메이션 실행 시간이 끝나면 즉시 애니메이션 종료 상태로 점프합니다

step([,[start | end]]?): 첫 번째 매개변수 숫자는 지정된 간격 수입니다. 즉, 애니메이션이 단계적 표시를 위해 n 단계로 분할됩니다. 두 번째 매개변수의 기본값은 마지막 단계 시작이 끝의 상태이고 끝이 상태입니다. 애니메이션으로 설정한 경우 - 채우기 모드의 효과가 충돌하며 애니메이션 채우기 모드의 설정이 애니메이션 종료 상태입니다.

cubic-bezier(,,,): 특수한 3차 제벨 곡선 효과


animation-delay
: 재생 시간 시작


animation-iteration -count
: 재생 횟수는 무한 루프 재생을 의미합니다.

animation-direction: 값은

normal: 정상. 방향

reverse: 애니메이션이 반대 방향으로 실행되며 방향은 항상 정상과 유사합니다.alternate: 애니메이션이 정방향과 역방향을 교대로 순환합니다

animation-fill-mode: 재생 후 상태, 값:

none: 기본값, 설정되지 않음

forwards: 종료 후 애니메이션이 끝나는 상태를 유지
backwards: Return 끝 이후에 애니메이션이 시작될 때의 상태
both: 끝 이후에 따라갈 수 있음 앞뒤로 두 가지 규칙

animation-play-state: 객체 애니메이션의 상태를 검색하거나 설정, 값:

running: 기본값, 모션 paused: 일시 중지됨

4개, 관련 속성



transform-origin
: 변환 원점, 변환 참조점 , 기본값은 요소의 중심점입니다. 두 개의 매개변수가 있는데 매개변수 1은 가로좌표이고 매개변수 2는 세로좌표입니다.

percentage: 좌표 값을 백분율로 지정, 음수 가능

length: 좌표 값을 길이로 지정, 음수 가능 왼쪽 가운데 오른쪽: 가로 방향 값 사용 상단 중앙 하단: 수직 방향의 값을 취합니다. 값

perspective-prigin: 3D 요소의 X축과 Y축에 정의된 원근 원점으로, 3D 요소의 아래쪽 위치입니다. 이 속성이 정의되면 요소 자체가 아니라 요소의 하위 요소입니다.

참고: 이 속성은 3D 변환 요소에만 영향을 미치는 관점 속성과 함께 사용해야 합니다.

값: 백분율, 길이, 왼쪽, 중앙, 오른쪽, 위쪽, 중앙, 아래쪽


backface-visibility

: 콘텐츠의 뒷면을 숨기고 뒷면은 다음으로 표시됩니다. 기본값, 반전 변환 후 내용은 계속 표시됩니다. 뒷면 가시성이 숨김으로 설정되면 회전 후 내용이 숨겨지고 회전 후 앞면이 더 이상 표시되지 않습니다.

값: 표시, 숨김변형 스타일: 3D 렌더링, 포함된 요소가 3D 공간에서 렌더링되는 방식을 설정합니다. 두 가지 값이 있습니다. 플랫: 모든 하위 요소가 2D 평면에서 렌더링됩니다
Preserve-3d: 3D 공간 보존

위 내용은 CSS3 4가지 속성 분석(변형, 전환, 애니메이션, 연관)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!