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

하지만 변환에서 여러 속성을 사용할 때는 공백으로 구분해야 합니다. 공백으로 구분된다는 점을 기억하세요. 예: 변환:회전(30deg):

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

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

Matrix(, , , , ,

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 p>

　　　 결과: 그림과 같음

　　　　

　　　　　　　　데모 示例:
　　　　　　　　　　
　　　　　　　　　　

   　　　　　　　　　　　　

   　　　　　　　　　　　　

   　　　　　　　　　　　
   　　　　　　　　　　　　

   　　　　　　　　　　　　

　　　　　　　　　

　　　　　　　　　　<script><br/>    　　　　　　　　　　　　　　var oList=document. getElementById("list");<br/>    　　　　　　　　　　　　　　var oCss=document.getElementById("css");<br/>  　　　　　　　　　　　　　　var oHour=document.getElementById("시간");<br/>    　　　　　　　　　　　　　　var oMin=document.getElementById("min" ); <var var> var osec = document.getElementById ( "sec"); <🎜 var ali = ""; <🎜 🎜> var scss = ""; <br/> for (var i = 0; 60; i ++ )<br/>    　　　　　　　　　　　　　　　{<br/>        　　　　　　　　　　　　　　　　　sCss+="#wrap ul li:nth-of-type("+(i+1)+"){ -webkit-transform:rotate("+i*6+"deg); }";<br/>        　　　　　　　　　　　　　　　　　　aLi+="<li>"<br/>    　　　　　　　　　　　　　　　　}<br/>    　　　　　　　　　　　　　oList.innerHTML=aLi;<br/>    　　　　　　　　　　　　　　oCss.innerHTML+=sCss;<br/>    　　　　　　　　　　　　　　toTime();<br/>    　　　　　　　　　　　　　setInterval(toTime,1000);<br/>    　　　　　　　　　　　　　function toTime()<br/>   　　　　　　　　　　　　　　　　　{<br/>        　　　　　　　　　　　　　　　　　　　var oDate=new Date();<br/>        　　　　　　　　　　　　　　　　　　　　var iSec=oDate.getSeconds();<br/>      　　　　　　　　　　　　　　　　　　　　var iMin=oDate. getMinutes()+iSec/60;<br/>        　　　　　　　　　　　　　　　　　　　　var iHour=oDate.getHours()+iMin/60;<br/>      　　　　　　　　　　　　　　　　　　　　oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";<br/> oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";<br/>oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";<br/>             ​<br/><br/>css3 전환 및 2d 변환과 관련된 더 많은 기사를 보려면 PHP에 주목하세요. 중국사이트! <p></script>