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

構文: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 未満の場合、要素は縮小されます。

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

Matrix