CSS3 トランジションと 2D トランスフォーム - レビュー

I1.Transition

文法: Transition: プロパティDuration Timing-Function Delay; Transition-PROPERTYはトランジション効果を設定します。 属性なしでは過剰になります。 効果 すべての属性が過剰な効果を受けます。
プロパティはトランジション効果を適用するための CSS 属性名のリストを定義します。リストはカンマで区切られます。
要素属性名
Transition-duration トランジション効果が完了するまでにかかる秒数またはミリ秒数
構文:transition-duration:time;
Timeはトランジション効果が完了するまでにかかる時間を指定します。デフォルト値は 0 で、効果がないことを意味します。Transition-timing-function は速度効果の速度曲線を指定します。
構文:transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
linearは同じ速度での開始と終了を指定しますオーバーエフェクト。
easeは、低速で開始し、次に高速化し、その後低速で終了することを規定しています。
イーズインは低速から始まる過剰なエフェクトを指定します。
ease-outは低速で終わる過剰なエフェクトを指定します。
ease-in-outは、低速で開始および終了するトランジション効果を指定します。
cubic-bezier(n,n,n,n) cubic-bezierに独自の値を定義します。取り得る値は0から1の間の値です。
transition-delay トランジション効果が開始されるタイミングを定義します
構文：transititon-lay: time;
timeはトランジション効果が開始するまでの待機時間を指定します。

int 0px;height:150px;} ;
.box{width :100px;height:1 00px;background:red;transition:5swidth cubic-bezier(0.145,1.295,0.000,1.610);}
.box :hover{width:500px;}

結果：写真の通り

例：（複数のバリエーションを併記） )

< /p>

結果：図の通り

2.transform

文字は変形を意味しており、 CSS3 では、transform には主に次のタイプが含まれます。回転、回転、歪み、スケール、移動、変換、行列

構文:transform: none | は、スペースで区切られた 1 つ以上の変換関数を表します。 ; 回転、拡大縮小、移動の 3 つのタイプがありますが、以前はオーバーレイ効果がカンマ (",") で区切られていたことを思い出してください。

ただし、transformで複数の属性を使用する場合は、スペースで区切る必要があります。スペースで区切られることに注意してください。

rotate

は負の数です。つまり、反時計回りの回転。 F: Transform: Rotate (30DEG):
モバイル移動
モバイル移動 3 つの場合に分けられます: 移動 (x, y) 水平方向と垂直方向が同時に移動します (つまり、X 軸と Y 軸が同時に移動します)。同時に);translatex (translatex ( x) は水平方向のみに移動します (X 軸の移動 translationY) は垂直方向にのみ移動します (Y 軸の移動)

》 スルースケールは以下とよく似ています。移動翻訳また、scale(x,y) 要素を水平方向と垂直方向に同時にスケールします (つまり、X 軸と Y 軸を同時にスケールします)。水平方向のスケーリング (X 軸スケーリング) )、スケーリングの中心点とベースは同じですが、中心点は要素の中心位置であり、スケーリングのベースは 1 です。その値が 1 より大きい場合。 、それ以外の場合、その値が 1 未満の場合、要素は縮小されます。

歪みスキューと平行移動、secale skew(x,y) は、要素を水平方向と垂直方向に同時に歪みます。 (X 軸と Y 軸が同時に特定の角度値に応じて歪みます); skewX(x) は要素を水平方向にのみ歪みます。 Deformation (X 軸の歪み)

skewY(y) ) 要素を垂直方向にのみ歪めます (Y 軸の歪み)

Matrix

matrix(, , , , ,

要素のデフォルトの基点はその中心位置であるため、つまり、transform-origin を使用して要素の基点の位置を変更しない場合、

回転、平行移動、拡大縮小、傾斜、トランスフォームで行う行列などはすべて要素に基づいて自分の中心位置が変わります。

.box:hover { -webkit-transform: 回転(45度);}

111

例：（変位）
< style>
.box{width:100px;height:100px;background:red;margin:100px auto 0;transition:2s;}
.box:hover{-webkit-transform:translate(-100px,200px);}

111

結果: 要素の位置が変更されます。

例：（ズーム）

111 ロイ）

111

結果：図の通り

.box{width:80px;height: 80px;background:red;margin:100px auto 0;transition:2s;}
.box:hover{-webkit-transform:matrix(0.5,0.38,-0.38,2,0,0);}
< ;p class=" box">111

結果: 示の通り

デモ 例：

;/ul>




< pクラス="ico">



<script><br> var oList=document.getElementById("list");<br> var oCss=document.getElementById("css");<br> var oHour=document.getElementById("hour");<br> var oMin=document.getElementById("min");<br> var oSec=document.getElementById("sec");<br> var aLi="";<br> var sCss="" ;<br> for(var i=0;i<60;i++)<br/> {<br/> sCss+="#wrap ul li:nth-of-type("+(i+1) +"){ -webkit-transform:rotate( "+i*6+"deg);}";<br/> aLi+="<li></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> ～ oDate.getHours()+iMin/60;<br> oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";<br> oMin.style.WebkitTransform="rotate ("+iMin*6+" 度) ";<br>oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";<br> };<br> </script>
結果：図の通り



その他のcss3トランジションと2d変換—レビュー関連記事 PHP中国語サイトにご注意ください！