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;

none は、変換なしを意味します。これらの変換属性は重ねて使用できます。重ねて使用する場合は、スペースで区切る必要があります。

以下では、各属性を 1 つずつ紹介します:

rotate (回転):

指定された角度パラメーターを通じて元の要素の 2D 回転 (2D 回転) を指定します。最初に、transform-origin 属性を指定する必要があります。定義されています。 Transform-origin は回転の基点を定義します。角度は、設定値が正の数値の場合、時計回りの回転を意味します。設定値が負の数値の場合、反時計回りの回転を意味します。例:transform:rotate(50deg)

translate (move):

translate(x,y) は水平方向と垂直方向に同時に移動します (つまり、X 軸と Y 軸は次のように移動します)。同時に)、translateX(x) は水平方向のみに移動します (X 軸の移動)、translateY(Y) は垂直方向のみに移動します (Y 軸の移動)。変換:translate(100px,20px) など。

scale

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

skew

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

matrix

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

要素の基点変換を変更する方法-origin

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 ;