座標変換関数の matrix3d() を更新

files/ja/web/css/transform-function/matrix3d/index.md

@@ -1,13 +1,17 @@
 ---
 title: matrix3d()
 slug: Web/CSS/transform-function/matrix3d
+l10n:
+  sourceCommit: 88e01e6f934ea5f2413cecfab1b5112cf819ba09
 ---
 
 {{CSSRef}}
 
-**`matrix3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 4x4 の三次元同次変換行列を定義します。
+**`matrix3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 4x4 の 3D 同次変換行列を定義します。
 結果は {{cssxref("<transform-function>")}} データ型になります。
 
+{{EmbedInteractiveExample("pages/css/function-matrix3d.html")}}
+
 ## 構文
 
 `matrix3d()` 関数は 16 個の値で指定します。列優先の順で記述します。
@@ -22,28 +26,28 @@ matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
   _a3_ _b3_ _c3_ _d3_
   - : {{cssxref("<number>")}} で、線形変換を記述します。
 - _a4_ _b4_ _c4 d4_
-  - : {{cssxref("<number>")}} で、適用する変換を記述します。
+  - : {{cssxref("<number>")}} で、適用する座標変換を記述します。
 
 <table class="standard-table">
   <thead>
     <tr>
-      <th scope="col">ℝ^2 のデカルト座標</th>
-      <th scope="col">ℝℙ^2 の同次座標</th>
-      <th scope="col">ℝ^3 のデカルト座標</th>
-      <th scope="col">ℝℙ^3 の同次座標</th>
+      <th scope="col"><a href="/ja/docs/Web/CSS/transform-function#直交座標系">直交座標系</a> (<a href="https://ja.wikipedia.org/wiki/実数空間">ℝ^2</a>)</th>
+      <th scope="col"><a href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">同次座標系</a> (<a href="https://en.wikipedia.org/wiki/Real_projective_plane">ℝℙ^2</a>)</th>
+      <th scope="col">直交座標系 (<a href="https://ja.wikipedia.org/wiki/実数空間">ℝ^3</a>)</th>
+      <th scope="col">同次座標系 (<a href="https://en.wikipedia.org/wiki/Real_projective_space">ℝℙ^3</a>)</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td colspan="2">
-        この変換は三次元空間に適用され、平面で表現することはできません。
+        この変換は 3D 空間に適用され、平面で表現することはできません。
       </td>
       <td>
-        一般的な三次元[アファイン変換](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%95%E3%82%A3%E3%83%B3%E5%86%99%E5%83%8F)は、変換が線形変換ではないので、デカルト座標行列を使用して表現することはできません。
+        一般的な 3D <a href="https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%95%E3%82%A3%E3%83%B3%E5%86%99%E5%83%8F">アフィン変換</a>は、変換が線形座標変換ではないので、直交座標行列を使用して表現することはできません。
       </td>
       <td>
         <math
-          ><mfenced
+          ><mrow><mo>(</mo
             ><mtable
               ><mtr
                 ><mtd><mi>a1</mi> </mtd><mtd><mi>a2</mi> </mtd
@@ -58,7 +62,7 @@ matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
                 ><mtd><mi>d1</mi> </mtd><mtd><mi>d2</mi> </mtd
                 ><mtd><mi>d3</mi> </mtd><mtd><mi>d4</mi></mtd></mtr
               ></mtable
-            ></mfenced
+            ><mo>)</mo></mrow
           ></math
         >
       </td>
@@ -70,7 +74,7 @@ matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
 
 ### つぶれる立方体の例
 
-次の例は、DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで `matrix3d()` 変換を適用することができます。
+次の例は、 DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで `matrix3d()` 変換を適用することができます。
 
 #### HTML
 
@@ -182,7 +186,7 @@ matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
 
 #### CSS
 
-```css
+```css-nolint
 html {
   width: 100%;
 }
@@ -203,28 +207,42 @@ body {
   text-align: center;
   font-family: system-ui, sans-serif;
   font-size: 14px;
-  /* Setting up animation for better demonstration */
+  /* より良いデモンストレーションのためのアニメーションの設定 */
   animation: MotionScale 2s alternate linear infinite;
 }
 
 @keyframes MotionScale {
   from {
     /*
-      Identity matrix is used as basis here.
-      The matrix below describes the
-      following transformations:
-        Translates every X point by -50px
-        Translates every Y point by -100px
-        Translates every Z point by 0
-        Scales down by 10%
+      ここでは恒等行列を基礎としています。
+      以下の行列は、以下の変換を記述しています。
+        それぞれの X 座標を -50px 移動する
+        それぞれの Y 座標を -100px 移動する
+        それぞれの Z 座標を 0 移動する
+        10% 縮小する
     */
-    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -50, -100, 0, 1.1);
+    transform: matrix3d(
+      1, 0, 0, 0,
+      0, 1, 0, 0,
+      0, 0, 1, 0,
+      -50, -100, 0, 1.1
+    );
   }
   50% {
-    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.9);
+    transform: matrix3d(
+      1, 0, 0, 0,
+      0, 1, 0, 0,
+      0, 0, 1, 0,
+      0, 0, 0, 0.9
+    );
   }
   to {
-    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
+     transform: matrix3d(
+      1, 0, 0, 0,
+      0, 1, 0, 0,
+      0, 0, 1, 0,
+      50, 100, 0, 1.1
+    )
   }
 }
 ```
@@ -244,5 +262,9 @@ body {
 ## 関連情報
 
 - {{cssxref("transform")}}
+- 独立の座標変換プロパティ:
+  - {{cssxref("translate")}}
+  - {{cssxref("scale")}}
+  - {{cssxref("rotate")}}
 - {{cssxref("&lt;transform-function&gt;")}}
-- [Understanding the CSS Transforms Matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/)
+- [Understanding the CSS Transforms Matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) (2012)