CSS3 변환, 전환, 애니메이션 및 관련 속성 분석 사용

1. 변환

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

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

transition: 전환 속성

transition: CSS 속성 전환 효과 이름 전환 속도 효과 곡선 전환 효과의 시작 시간

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

rotate(): 2차원 공간 회전 요소.

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

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

scale()

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

translate([,]): 이동량, 즉 변위량입니다.

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

skew(): Skew

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

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

a: scaleX(); X축 크기 조정
c: Y축 기울기
e: X축 기울기
b :scaleY(); Y축 크기 조정
d:translateX()X축 이동
f:translateY()Y축 이동

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

관점 (): 관점

<strong>.wrap{<br>    perspective:1000px; 
<br>}<br>.wrap .child{<br>    transform:perspective(1000px);<br>}</strong>

2. Transition

transition-property: 전환 속성

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

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

<strong>transition-timing-function:ease;/*缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔*/<br>transition-timing-function:linear;/*线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数*/<br>transition-timing-function:ease-in;/*渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数*/<br>transition-timing-function:ease-out;/*渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数*/<br>transition-timing-function:ease-in-out;/*渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数*/<br>transition-timing-function:cubic-bezier;/*特殊的立方贝塞尔曲线效果*/</strong>

3. Animation

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

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

<strong>.animation_name{<br>    left:0;<br>    top:100px;<br>    position: absolute;<br>    -webkit-animation: 0.5s 0.5s ease infinite alternate;<br>    -moz-animation: 0.5s 0.5s ease infinite alternate;<br>    -webkit-animation-name:demo;<br>    -moz-animation-name:demo;<br>}<br>@-webkit-keyframes demo{<br>    from{left:0;}<br>    to{left:400px;}<br>}<br>@-webkit-keyframes demo1{<br>    0%{left:0;}<br>    50%{left:200px;}<br>    100%{left:400px;}<br>}</strong>

animation-duration: 애니메이션 시간

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

ease: Ease 효과는 큐빅-베지어(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: 재생 방향:

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

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

none: 기본값, 설정 없음 시작 상태
둘 다: 종료 후 앞으로 및 뒤로라는 두 가지 규칙을 따를 수 있습니다.
animation-play-state: 개체 애니메이션의 상태를 검색하거나 설정합니다. 값:
running: 기본값, 모션
paused: 일시 중지

4. 관련 속성

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

퍼센트: 백분율을 사용하여 좌표 값 지정, 음수 가능

길이: 길이를 사용하여 좌표 값 지정, 음수 가능왼쪽 가운데 오른쪽: 가로 방향 값
상단 중앙 하단: 수직 방향 값

perspective-prigin: 3D 요소의 X축과 Y축에 정의된 원근 원점으로, 3D 요소의 하단 위치를 허용합니다. 이 속성을 정의할 때 요소 자체가 아니라 요소의 하위 요소인 Perspective입니다.

참고: 이 속성은 3D 변환 요소에만 영향을 미치는 관점 속성과 함께 사용해야 합니다. 값: 백분율, 길이, 왼쪽, 중앙, 오른쪽, 위쪽, 중앙, 아래쪽

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

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

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