From a81cea7d8b08d1765dcc5ea62e6238dd1d596a05 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 23 Nov 2021 02:21:04 +0900 Subject: CSS 座標変換関数のリファレンスを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/21 時点の英語版に同期 --- .../web/css/transform-function/matrix()/index.md | 201 +++++++++++++-------- 1 file changed, 127 insertions(+), 74 deletions(-) (limited to 'files/ja/web/css/transform-function/matrix()') diff --git a/files/ja/web/css/transform-function/matrix()/index.md b/files/ja/web/css/transform-function/matrix()/index.md index 02af2d3f7d..a522b300fd 100644 --- a/files/ja/web/css/transform-function/matrix()/index.md +++ b/files/ja/web/css/transform-function/matrix()/index.md @@ -3,69 +3,138 @@ title: matrix() slug: Web/CSS/transform-function/matrix() tags: - CSS - - CSS 変換 - CSS 関数 - - Reference + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.matrix translation_of: Web/CSS/transform-function/matrix() --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の matrix() 関数は、二次元同次変換行列を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`matrix()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二次元同次変換行列を定義します。結果は {{cssxref("<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) の短縮形です。

-
+> **Note:** `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つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。

+`matrix()` 関数は 6 つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。 -
メモ: Firefox 16 までは、 Gecko は {{cssxref("<length>")}} 値を tx および ty で受け付けていました。
+```css +matrix(a, b, c, d, tx, ty) +``` -
matrix(a, b, c, d, tx, ty)
-
+### 値 -

値

- -
-
a b c d
-
{{cssxref("<number>")}} で、線形変換を記述します。
-
tx ty
-
{{cssxref("<number>")}} で、適用する変換を記述します。
-
+- _a_ _b_ _c_ _d_ + - : {{cssxref("<number>")}} で、線形変換を記述します。 +- _tx_ _ty_ + - : {{cssxref("<number>")}} で、適用する変換を記述します。 - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
[a b c d tx ty]
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ a c b d + + a c tx b d ty 0 0 1 + + a c tx b d ty 0 0 1 + + a c 0 tx b d 0 ty 0 0 1 0 0 0 0 1 +
[a b c d tx ty]
-

例

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

例

-

HTML

+### HTML -
<div>Normal</div>
-<div class="changed">Changed</div>
+```html +
Normal
+
Changed
+``` -

CSS

+### CSS -
div {
+```css
+div {
   width: 80px;
   height: 80px;
   background-color: skyblue;
@@ -74,40 +143,24 @@ translation_of: Web/CSS/transform-function/matrix()
 .changed {
   transform: matrix(1, 2, -1, 1, 80, 80);
   background-color: pink;
-}
+} +``` -

結果

+### 結果 -

{{EmbedLiveSample("Examples", 350, 350)}}

+{{EmbedLiveSample("Examples", 350, 350)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Transforms", "#funcdef-transform-matrix", "matrix()")}}{{Spec2("CSS3 Transforms")}}初回定義
+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 - +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [`matrix3d()`](/ja/docs/Web/CSS/transform-function/matrix3d()) +- [Understanding the CSS Transforms Matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) -- cgit v1.2.3-54-g00ecf