css3アニメーション属性transform(変換)_html/css_WEB-ITnose

CSS3 の

Transform には主に、

rotate (回転)、translate (移動)、scale (ズーム)、skew (歪み)、matrix (行列の変形) の種類があります。

transform ： none | <transform-function> [ <transform-function> ]* 也就是：transform: rotate | scale | skew | translate |matrix;

rotate (回転):

translate (move):

(スケール):
scale(x,y) は、要素を水平方向と垂直方向に同時にスケールします (つまり、X 軸と Y 軸を同時にスケールします)。要素を水平方向にのみスケーリングします (X 軸スケーリング)。scaleY(y) 要素は垂直方向のみにスケーリングします (Y 軸スケーリング)。ただし、スケーリングの中心点と基点は同じです。中心点は要素の中心位置です。値が 1 要素より大きい場合、要素は拡大されます。それ以外の場合、要素は縮小されます。例:transform:scale(2,1.5)。

(歪み): skew(x,y) は要素を水平方向と垂直方向に同時に歪みます (X 軸と Y 軸は特定の角度値に従って歪みます)同時に); skewX(x) は要素を水平方向に歪ませるだけ (X 軸の歪み)、 skewY(y) は要素を垂直方向に歪ませるだけ (Y 軸の歪み) を引き起こします。例:transform:skew(30deg,10deg)。

(行列変形):
matrix(, , , , , ): 6 値 (a、b、c、d、e、f) の変換行列の形式で 2D 変換を指定します。これは、[ab c d e f] 変換行列を直接適用するのと同等です

transform -origin(X,Y): 要素の移動の基点(基準点)を設定するために使用されます。デフォルトの点は要素の中心点です。 X と Y の値はパーセンテージ値にすることができ、em、px、X は文字パラメータ値 left、center、right にすることもできます。Y も X と同様に文字値 top、center、を設定できます。これは、背景の位置の設定に少し似ています。例:transform-origin:(left,top)。

 /*Mozilla内核浏览器：firefox3.5+*/  -moz-transform: rotate | scale | skew | translate ; /*Webkit内核浏览器：Safari and Chrome*/  -webkit-transform: rotate | scale | skew | translate ; /*Opera*/  -o-transform: rotate | scale | skew | translate ; /*IE9+*/  -ms-transform: rotate | scale | skew | translate ; /*标准*/  transform: rotate | scale | skew | translate ;