マトリックス変換やその他の変換 CSS プロパティをどのように使用すればよいですか? 質問する

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

translate()、rotate()、scale()そしてskew()

このmatrix()方法を理解するには、まず他の 4 つのタイプを理解するのが最善です。

変換:

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

翻訳する：

翻訳例を見るここ。

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

回転:

回転の例を確認するここ。

rotate(c)は、要素に与えたい回転量を表す引数を1つ取ります。正の回転は時計回り、負の回転は反時計回りです。要素を時計回り（正）に30度回転させる場合は、 のようになりますtransform: rotate(30deg);。今回は引数が でありdeg、ない px。

規模：

スケール例を確認するここ。

scale(a, d)2つの引数を取ります。最初の引数はX方向の拡大縮小量、2番目の引数はY方向の拡大縮小量です。拡大縮小は次のように行われます。増殖する現在の値 (幅、高さ) をスケール値で割ったもの。要素を X 方向に 2 倍、Y 方向に 4 倍に拡大縮小する場合は、次のようになりますtransform: scale(2, 4);。引数には、小数や負の値も含め、任意の値を指定できます。負の値は、それぞれの軸を中心に要素を反転させる効果があります。

斜め：

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

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

マトリックス：

マトリックスの例を確認するここ。

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()。これこのウェブサイトでは、ページを下にスクロールすると (モバイル デバイスではなくコンピューターで)、ページ上の要素がそのmatrix()メソッドによって変換されます。素晴らしい効果を生み出します。

最後に、ブラウザごとに異なる構文があります。w3schoolsによるとこここれらは以下の通りである

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