matrix()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
matrix()
は CSS の関数で、二次元同次変換行列を定義します。結果は <transform-function>
データ型になります。
試してみましょう
メモ: matrix(a, b, c, d, tx, ty)
は matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)
の短縮形です。
構文
matrix()
関数は 6 つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。
css
matrix(a, b, c, d, tx, ty)
値
例
HTML
html
<div>Normal</div>
<div class="changed">Changed</div>
CSS
css
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.changed {
transform: matrix(1, 2, -1, 1, 80, 80);
background-color: pink;
}
結果
仕様書
Specification |
---|
CSS Transforms Module Level 1 # funcdef-transform-matrix |
ブラウザーの互換性
BCD tables only load in the browser