web-dev-qa-db-ja.com

マトリックス変換およびその他の変換CSSプロパティを使用するにはどうすればよいですか？

CSSでtransformプロパティを使用する場合、可能なメソッドの1つは、6つの入力フィールドを必要とするmatrixメソッドです。 CSSコードは次のようになります...

#test{
    transform: matrix(1, 0, 0, 1, 0, 0);
}

他にもいくつかのバリエーションがあります（ブラウザーによって異なります）...

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

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

上記の値はオブジェクトの株価であることは知っていますが、すべての数値はどういう意味ですか？

csstransformcss-transforms
32
Birrel

上記の変換プロパティは、CSSプロパティの2D Transformsカテゴリに分類されます。上記のmatrix()メソッドと共に、transformに付随する他のメソッドがいくつかあります。

translate()、rotate()、scale()、skew()

matrix()メソッドを理解するには、最初に他の4つのタイプを理解することが最善です。

変換：

これら4つの変換方法は、まさにそのとおりです。

TRANSLATE：

翻訳例をチェックアウト ここ 。

translate(e, f)は2つの引数を取ります。最初の引数は要素のx位置、2番目の引数はy位置-両方とも初期位置に相対的です。要素を50ピクセル右に移動し、100ピクセル下に移動する場合、CSSはtransform: translate(50px, 100px);のようになります。正のXは正、正のYは下です。負の数は、要素を反対方向に移動します。

Translate

回転：

回転の例を確認してください ここ 。

rotate(c)は1つの引数を取ります。これは、要素に必要な回転量です。正の回転は時計回り、負の回転は反時計回りです。要素を時計回りに30度（正）回転させると、transform: rotate(30deg);のようになります。今回は引数がdegおよびnotpxにあることに注意してください。

Rotate

スケール：

スケールの例を確認 here 。

scale(a, d)は2つの引数を取ります。最初の引数はX方向にスケーリングする量であり、2番目の引数はY方向にスケーリングする量です。スケーリングはmultiplyingスケール値による現在の値（幅、高さ）によって機能します。 X方向に2倍、Y方向に4倍に要素をスケーリングすると、transform: scale(2, 4);のようになります。引数には、小数を含む任意の値、さらには負の値を指定できます。負の値は、それぞれの軸を中心に要素を反転させる効果があります。

Scale

SKEW：

スキューの例を確認する ここ 。

skew(b, c)は、説明するのに最も複雑な変換である可能性があります。 skew(c, d)は2つの引数を取ります。最初の引数は水平面（上と下）に対応し、2番目の引数は垂直面（左と右）に対応します。両方の引数はdegにあり、rotate()の引数と同様です。最初の引数に正の値を指定すると、垂直面が中心点を中心に反時計回りに回転します。負の値を指定すると、垂直面が中心点を中心に時計回りに回転します。 2番目の引数の正の値は、水平面を中心点を中心に時計回りに回転させ、負の値は水平面を反時計回りに回転させます。次の例に示すように、各引数の制限（度単位）は+ -90度です。

Skew

マトリックス：

マトリックスの例をチェックアウト ここ 。

matrix(a, b, c, d, e, f)は、前述の変換が行うすべてを実行します。

2つの引数aとdは、それぞれX方向とY方向に要素をスケーリングするためのものです。 同一scale(a, d)メソッドのそれと同じ。

2番目と3番目の引数bとcは、要素を傾斜させるためのものです。 2つの値は同一skew(b, c)メソッドの値と同じです。

最後に、最後の2つの引数eとfは、それぞれX方向とY方向に要素を変換するためのものです。 同一translate(e, f)メソッドのそれと同じ。

matrix()変換を使用して、驚くほどの量の効果を得ることができます。 this websiteをご覧ください。ページをスクロールダウンすると（モバイルデバイスではなくコンピューターで）、ページ上の要素がmatrix()メソッドを介して変換されます。それは素晴らしい効果をもたらします！

最後に、ブラウザごとに異なる構文があります。 w3schools here によると、彼らは次のとおりです

transform:
-ms-transform: /* IE 9 */
-webkit-transform: /* Safari and Chrome */

ベストプラクティスは、サイトを起動する前にさまざまなブラウザでテストすることです。

さまざまな2D変換の詳細については、 このリンク をご覧ください。 matrix()メソッドの背後にある数学については、 このリンク を確認してください。

87
Birrel

数学的な背景がないときに行列に頭を包むのに時間を費やす代わりに、他の変換を理解し、それらを1行に組み合わせる方法を知ることをお勧めします.

これの代わりに

#shape {
    transform: rotate(40deg);
    transform: translate(100px, 30px);
    transform: scale(0.8, 0.4);
}

代わりにこれを行います：

#shape {
    transform: rotate(40deg) translate(100px, 30px) scale(0.8, 0.4)
}

そして、それはあなたがあなたの頭を包み込むことができ、マトリックスと同じくらいの力を持っているあなたの望む結果を与えます。

6
djynnius