CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのmatrix()関数とは？2D変換行列の使い方をサンプルコードで解説

CSSのmatrix()関数は、同次2D変換行列（homogeneous 2D transformation matrix）を定義するために使用される関数です。引数には線形変換の値を指定することで、要素に対して拡大縮小・回転・傾斜・移動といった複数の変換を一度に適用できます。

matrix()関数の基本構文

matrix()関数は、以下のように6つの引数を受け取ります。

transform: matrix(a, b, c, d, e, f);

各引数の意味は次のとおりです。

  • a, d：水平方向・垂直方向の拡大縮小率
  • b, c：傾斜（スキュー）の度合い
  • e, f：水平方向・垂直方向の移動量（ピクセル）

サンプルコード1

まずは基本的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    transform: matrix(2, 1, -1, 1, 190, 100);
}
.skew_img {
    transform-origin: top right;
    transform: skew(-0.10turn, 30deg);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="demo" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>

出力結果

このコードでは、matrix(2, 1, -1, 1, 190, 100) を指定しているため、画像が拡大されながら回転・移動して表示されます。比較用として、skew()関数で傾斜をかけた画像も並べて表示しています。

サンプルコード2

続いて、別のパラメータを指定した例です。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    transform: matrix(0.9, 0.8, -0.8, 0.8, 100, -30);
}
.skew_img {
    transform-origin: left;
    transform: skew(-0.10turn, 30deg);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="demo" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>

出力結果

この例では、matrix(0.9, 0.8, -0.8, 0.8, 100, -30) を指定しています。拡大縮小率が1未満のため縮小されつつ、傾斜と移動が組み合わさった変換が適用されます。また、transform-originプロパティに「left」を指定することで、変換の基準点が左側に設定されている点にも注目してください。

まとめ

matrix()関数を使うことで、scale()・rotate()・skew()・translate()など複数の変換関数の効果を、ひとつの行列としてまとめて指定できます。細かい変換制御が必要な場合や、JavaScriptから行列計算の結果を直接反映させたい場合に特に便利な関数です。

  1. CSSの:last-child疑似クラスとは？使い方を実例付きで解説

    CSSの :last-child 疑似クラスは、ある親要素の中で「最後の子要素」となる要素を選択するためのセレクタです。リストの最終項目だけ色を変えたい、表の右端の列だけ罫線を引きたい、といった場面で非常に便利です。基本構文:last-child の書き方は以下の通りです。:last-child {     /* 宣言（スタイル定義） */ }例1：テーブルの最後の列にスタイルを適用するまずは、表（table）に対して :last-child を使った具体例を見てみましょう。<!DOCTYPE html> <html> <h

  2. CSSの@importルールとは？メディアタイプ別にスタイルシートを読み込む方法

    CSSの@importルールは、外部スタイルシートを読み込むための@ルールです。インポートするCSSファイルのURLの後にメディアタイプを指定することで、「画面表示用」「印刷用」など、対象となるメディアごとに異なるスタイル情報を適用できます。@importの基本構文@importルールの基本的な書き方は以下のとおりです。@import url(/* ファイルパス */) メディアタイプ {     CSSコード; }それでは、実際のコード例を見ていきましょう。例1：screen（画面）とprint（印刷）でスタイルを切り替えるHTMLドキュメント<