css3_html/css_WEB-ITnoseのtransform属性の簡単かつ大雑把な説明

この記事の範囲は依然として 2D 変換に限定されていることに事前に注意してください。

私はCSS3のtransform属性がとても気に入っています。この機能を使用すると、さまざまな特殊効果を簡単に実現できます。歌詞を引用すると、「回って、跳ねて、止まらない」。トランスフォームはとてもファッショナブルで意志が強いです。もちろん、彼のこだわりは機能面だけではなく、使い方にもあります。 W3C 公式 Web サイトにある Transform 2D の使い方の紹介を見てみましょう。

たくさんあるので、まずそれらを分類しましょう: 1 つの行列、3 つの平行移動、3 つのスケール、3 つのスキュー、1 つの回転。 3 つの変換は、XY、X、Y の 3 つのタイプに分類されます。これらの操作の関係を大まかに示すために図を描きました。

これを見て、なぜ行列が他のすべての演算の先頭にあるのか疑問に思う人もいるかもしれません。実際、行列を除いて、他の演算は行列の拡張であるとはどういう意味ですか?平行移動、拡大縮小、傾斜、回転の操作はすべて、行列の原理を理解していない人が使用するものであるため、行列の方法を便利に使用できるようにいくつかのメソッドをカプセル化しました。それを証明するにはどうすればよいでしょうか?興味のある子は、要素のスタイル (注: クラス ルールではなく、計算されたスタイル) を確認したり、要素の変換属性を出力したりできます。看看是不得都是一的行列的結果，次似:

matrix(1, 0.466307658154999, 0, 1, 0, 0）

不罗嗦了，確かに操作最终都は行列上であり，那么他の間の関係は何か呢？行列の知識を使って計算方法を説明するとこの記事のタイトルにそぐわないし、すでにそのような記事はたくさんあるので、恥ずかしがらずに原則を貫きます。タイトル: 簡単で大雑把な説明。 R t t 最初にtranslateと言います、翻訳すると「転送」です。まず、translate の構文を説明します:

transform：translate（25px,26px）

。これは、25 ピクセルと 26 ピクセルを右と下にシフトすることを意味します。次に、それを行列構文に変換して、次のステートメント行を確認します:

transform: matrix(1, 0, 0, 1, 25, 26);

、最後の 25 26 は X 軸と Y 軸の変位を表します。興味のある方は、X 変位と Y 軸の変位を自分で試してみてください。もちろん、私もスペースを占めるためにそれらを使用しません。以下の説明を避けるために、変換の値の初期化、つまり変換がない場合の行列のデフォルト値を強調します。不明瞭。

次に、スケールがあります。私はそれを「ズーム」に翻訳することに慣れているので、この翻訳はその機能であるスケーリングコンポーネントにも対応します。構文を示します:

transform:scale(1.1,1.2);

また、行列形式に変換されたステートメントを見てみましょう:

  transform: matrix(1.1, 0, 0, 1.2, 0, 0);

のスケーリング、その値が増幅される回数に対応していることは明らかです。同様に、X 軸と Y 軸の個別のテストは実行されません。

スキューをもう一度見てみましょう。スキューの機能は、コンポーネントを特定の角度に傾けることです。これは、平行四辺形を描くために使用できます。はい、単一のスキューを使用して

transform: skewX(45deg);transform: skewY(45deg);

を示す方が確実です。行列形式の対応するステートメントは次のとおりです:

  transform: matrix(1, 0, 1, 1, 0, 0);  transform: matrix(1, 1, 0, 1, 0, 0);

問題は見つかりましたか? X 方向の傾きは 3 番目の値の変更に対応し、Y 方向の傾きは 2 番目の値の変更に対応します。この値の意味を説明します。この値は偏向する必要がある角度の Tan 値です。 1 に相当する 45° の角度で回転する必要があります。興味がある場合は、他の値を試して確認してください。

この時点で、行列の 6 つの値の意味がわかりました:

最初の要素: X 軸の倍率

2 番目の要素: Y 軸の傾斜角の正接値

3番目の要素 要素: X軸の傾き角度のtan値

4番目の要素: Y軸増幅に関する注意事項

5番目の要素: 右にシフトしたピクセルサイズ

6番目の要素: 下にシフトしたピクセルサイズ。不还はここで終わりではないと言いました、そして説明なしでRATATEがあります 説明の前に、図を見てください:

これらの2つの写真はほぼ効果的だと思われますか？確かにこれらはほとんど同じですが、上の図は回転によって実現されているのに対し、下の図はスキュー、つまり 45 度の角度で回転によって実現されているという違いがあります。生成された 2 つのスタイルをそれぞれ見てください。

れー

これを見て多くの人が疑問に思うでしょう。上記の 0.7 は平方根の 2 分の 1、つまり cos45° または sin45° を指します。では、これら 2 つの計算方法は一体何でしょうか。これを説明するには行列実装の原理に戻る必要があります。変換の原理を簡単に説明します。まず中心点 (デフォルトは中央) を見つけ、次にその点に対する各ピクセルの座標を計算します。 100*100 の左上隅 (つまり、-50,50)、行列によって渡された 6 つの値と 0、0、1 を取得して新しい行列を形成し、次で構成される行列で演算を実行します。元の座標を使用して新しい行列を取得し、それを新しい行列に追加します。 新しい X 座標と新しい Y 座標を取得します。 成说 さて、タイトルからは少し離れていますが、まだ簡単で大雑把に説明すると、行列は (A、B、C、D、E、F) に置き換えられます。次に、中心点に基づいて各ピクセルの相対座標を計算し、新しい座標を計算します。

x' = a * x + c * y + e; x + d * y + f; 回転する場合、渡される値はそれぞれ cosθ、sinθ、sinθ、cosθ であり、skew によって渡される値は次のとおりです: cosθ/consθ、sinθ/cosθ、sinθ/cosθ、 cosθ/cosθ。これが、回転にスキューを使用すると画像が 2 倍に拡大される理由です。実際、通常の状況では、マトリックス公式を使用するために前述の 6 つの計算を使用するだけで、この記事の最後の部分を使用して記事の整合性を保つのに十分ですが、単純な失礼の原則が失われます。