CSS3アニメーション制作学習(1)_html/css_WEB-ITnose

CSS3 のアニメーション制作には、transform、transition、animation の 3 つの属性があります。今日時間があれば、transform について学びます。結局のところ、私はそれが良いアイデアではないと思います。

ここは主に私の勉強を記録する場所です。多くの人のブログなどをチェックし、それをリストします。盗用のためではありません。

http://www.w3cplus.com (w3cplusはとても良いウェブサイトです。オリジナルの味が好きならぜひチェックしてください)

Transformとは文字通り変換を意味します。

1. 回転:

これは関数です。45 度のような角度パラメータが必要です。この角度が正の場合は時計回りの回転を意味し、負の場合は反時計回りの回転を意味します。もしあなたが注意していれば、彼の回転点がどこにあるのかが必ずわかります。実際、デフォルトは中心点です。この点を指定するには、transform-origin: 20% 30%; のように使用します。 (後ろにブロック要素がある場合、回転された要素がposition:absolute;と同等であることをどのように調べますか。そして、z-indexを設定し、下の次の要素を押して、戻って見てください)

2. translation (移動)

Translate は、translate(x, y) が水平方向と垂直方向の両方に移動する、translateX(x) が水平方向に移動する、translateY(y) が垂直方向に移動する 3 つの状況に分かれます。デフォルトの基点は要素の中心点ですが、transform-origin を使用して設定することもできます。例:transform:translate(100px, 20px); これらはすべて関数であることに注意してください。 ！ ！ ！ ！

3. スケール

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

4. スキュー (歪み)

skew(x,y) は、要素を水平方向と垂直方向に同時に歪みます (X 軸と Y 軸は特定の角度値に従って歪みます)同時に); skewX(x) は要素を水平方向にのみ歪みます (X 軸の歪み); skewY(y) は要素を垂直方向にのみ歪みます (Y 軸の歪み)。

5. 行列

matrix(, , , , , ): 6 値を取ります ( 2D 変換を指定します) a、b、c、d、e、f の形式での変換行列は、[ab c d e f] 変換行列を直接適用するのと同じです。要素を水平方向(X軸)と垂直方向(Y軸)に基づいて再配置するための属性値です。これは単なる数学の問題です。後で使用するときに説明しますが、今後は使用されないと思います。

上記の基点はすべて中心点であり、transform-origin を通じてのみ変換できます。

1. 左上 | 左上は 0% 0% に相当します。

に相当します。 | 中央右は 100% に相当します

中央下は 50% に相当します