1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. 値
  5. <transform-function>
  6. matrix()

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

matrix()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

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) の短縮形です。

試してみましょう

transform: matrix(1.2, 0.2, -1, 0.9, 0, 20);

transform: matrix(0.4, 0, 0.5, 1.2, 60, 10);

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

transform: matrix(0.1, 1, -0.3, 1, 0, 0);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/proxy/developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

構文

css
matrix(a, b, c, d, tx, ty)

値

matrix() 関数は 6 つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。

a b c d

<number> で、線形変換を記述します。

tx ty

<number> で、適用する変換を記述します。

直交座標系 (ℝ^2) 同次座標系 (ℝℙ^2) 直交座標系 (ℝ^3) 同次座標系 (ℝℙ^3)
(acbd)\begin{pmatrix} a & c \\ b & d \end{pmatrix}
(actxbdty001)\left( \begin{array}{ccc} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \\ \end{array} \right)
(actxbdty001)\left( \begin{array}{ccc} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \\ \end{array} \right)
(ac0txbd0ty00100001)\left( \begin{array}{cccc} a & c & 0 & tx \\ b & d & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{array} \right)
[a b c d tx ty]

値は次の関数を表します。 matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

形式文法

<matrix()> = 
  matrix( <number>#{6} )
この構文は CSS Transforms Module Level 1 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

HTML

html
<div>通常</div>
<div class="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

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content