CSS matrix() 関数

定義と使用方法

CSSの matrix() この関数は、六つの値を含む行列を通じて二次元変換を定義します。

matrix() この関数は、要素に対して回転、拡大、移動、歪み操作を行うための六つのパラメータを受け取ります。

以下のパラメータ：matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())。

インスタンス

例1

を使用して matrix() いくつかの<div>要素に二次元変換を定義します：

#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

実際に試してみてください

例2

を使用して matrix() 画像に二次元変換を作成します：

#img1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#img2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#img3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

実際に試してみてください

CSS文法

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

技術的詳細

ブラウザのサポート

テーブルの数字は、その機能を完全にサポートする最初のブラウザのバージョンを示しています。

相关页面

参考：CSS transform 属性

参考：CSS matrix3d() 函数

教程：CSS 2D 变换