CSS 座標変換の文書を更新（変換関数を除く）

- 2021/10/13 時点の英語版に同期

11 files changed, 957 insertions, 1138 deletions

diff --git a/files/ja/web/css/backface-visibility/index.md b/files/ja/web/css/backface-visibility/index.md
index d7d06cb00f..7ff1988716 100644
--- a/files/ja/web/css/backface-visibility/index.md
+++ b/files/ja/web/css/backface-visibility/index.md
@@ -3,10 +3,11 @@ title: backface-visibility
 slug: Web/CSS/backface-visibility
 tags:
   - CSS
-  - CSS Property
-  - CSS Transforms
+  - CSS プロパティ
+  - CSS 座標変換
   - Reference
-  - 'recipe:css-property'
+  - recipe:css-property
+browser-compat: css.properties.backface-visibility
 translation_of: Web/CSS/backface-visibility
 ---
 {{CSSRef}}
@@ -15,90 +16,95 @@ translation_of: Web/CSS/backface-visibility
 
 {{EmbedInteractiveExample("pages/css/backface-visibility.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 [https://github.com/mdn/interactive-examples](https://github.com/mdn/interactive-examples) をクローンしてプルリクエストを送信してください。</p>
+要素の裏面は表面の鏡像です。裏面は二次元では可視ではありませんが、三次元空間で要素に回転変換が行われたときに、背面を見ることができます。 (このプロパティは、視点を持たない二次元の座標変換では効果がありません。)
 
-要素の裏面は表面の鏡像です。裏面は二次元では可視ではありませんが、三次元空間で要素に回転の変換が行われたときに、背面を見ることができます。 (このプロパティは、遠近感を持たない二次元の変換では効果がありません。)
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+```css
+/* キーワード値 */
 backface-visibility: visible;
 backface-visibility: hidden;
 
 /* グローバル値 */
 backface-visibility: inherit;
 backface-visibility: initial;
-backface-visibility: unset;</pre>
+backface-visibility: revert;
+backface-visibility: unset;
+```
 
 `backface-visibility` プロパティは、以下に挙げたキーワードのうちの一つで指定します。
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
 - `visible`
   - : ユーザーに対して裏を向いたとき、背面が可視になります。
 - `hidden`
   - : 背面が非表示になり、要素がユーザーに対して反対を向いたときに不可視にするのに便利です。
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
 {{cssinfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Cube_with_transparent_and_opaque_faces" name="Cube_with_transparent_and_opaque_faces">透明な面と不透明な面を持った立方体</h3>
+<h3 id="Cube_with_transparent_and_opaque_faces">透明な面と不透明な面を持った立方体</h3>
 
 この例は、透明な面と不透明な面を持つ立方体を表示します。
 
 <h4 id="HTML">HTML</h4>
 
-<pre class="brush: html notranslate">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;th&gt;&lt;code&gt;backface-visibility: visible;&lt;/code&gt;&lt;/th&gt;
-    &lt;th&gt;&lt;code&gt;backface-visibility: hidden;&lt;/code&gt;&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;
-      &lt;div class="container"&gt;
-        &lt;div class="cube showbf"&gt;
-          &lt;div class="face front"&gt;1&lt;/div&gt;
-          &lt;div class="face back"&gt;2&lt;/div&gt;
-          &lt;div class="face right"&gt;3&lt;/div&gt;
-          &lt;div class="face left"&gt;4&lt;/div&gt;
-          &lt;div class="face top"&gt;5&lt;/div&gt;
-          &lt;div class="face bottom"&gt;6&lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;p&gt;
+#### HTML
+
+```html
+<table>
+  <tr>
+    <th><code>backface-visibility: visible;</code></th>
+    <th><code>backface-visibility: hidden;</code></th>
+  </tr>
+  <tr>
+    <td>
+      <div class="container">
+        <div class="cube showbf">
+          <div class="face front">1</div>
+          <div class="face back">2</div>
+          <div class="face right">3</div>
+          <div class="face left">4</div>
+          <div class="face top">5</div>
+          <div class="face bottom">6</div>
+        </div>
+      </div>
+      <p>
         すべての面が透明であり、
         裏面 (2, 4, 5) が 表面 (1, 3, 6) を通して表示されます。
-      &lt;/p&gt;
-    &lt;/td&gt;
-    &lt;td&gt;
-      &lt;div class="container"&gt;
-        &lt;div class="cube hidebf"&gt;
-          &lt;div class="face front"&gt;1&lt;/div&gt;
-          &lt;div class="face back"&gt;2&lt;/div&gt;
-          &lt;div class="face right"&gt;3&lt;/div&gt;
-          &lt;div class="face left"&gt;4&lt;/div&gt;
-          &lt;div class="face top"&gt;5&lt;/div&gt;
-          &lt;div class="face bottom"&gt;6&lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;p&gt;
+      </p>
+    </td>
+    <td>
+      <div class="container">
+        <div class="cube hidebf">
+          <div class="face front">1</div>
+          <div class="face back">2</div>
+          <div class="face right">3</div>
+          <div class="face left">4</div>
+          <div class="face top">5</div>
+          <div class="face bottom">6</div>
+        </div>
+      </div>
+      <p>
         背後の3面 (2, 4, 5) は非表示です。
-      &lt;/p&gt;
-    &lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
+      </p>
+    </td>
+  </tr>
+</table>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css notranslate">/* Classes that will show or hide the
-   three back faces of the "cube" */
+```css
+/* 「立方体」の 3 つの背面を表示または非表示にするクラス */
 .showbf div {
   backface-visibility: visible;
 }
@@ -175,37 +181,21 @@ th, p, td {
   padding: 6px;
   font-family: sans-serif;
   text-align: left;
-}</pre>
+}
+```
 
-<h4 id="Result" name="Result">結果</h4>
+#### 結果
 
 {{EmbedLiveSample('Cube_with_transparent_and_opaque_faces', '100%', 360)}}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## 仕様書
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-{{Compat("css.properties.backface-visibility")}}
+{{Compat}}
 
 ## 関連情報
 
-<ul>
- <li>[CSS 変形の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)</li>
-</ul>
+- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
diff --git a/files/ja/web/css/css_transforms/index.md b/files/ja/web/css/css_transforms/index.md
index c9cc0fd07a..0b153de550 100644
--- a/files/ja/web/css/css_transforms/index.md
+++ b/files/ja/web/css/css_transforms/index.md
@@ -1,9 +1,9 @@
 ---
-title: CSS 変換
+title: CSS 座標変換
 slug: Web/CSS/CSS_Transforms
 tags:
   - CSS
-  - CSS 変換
+  - CSS 座標変換
   - ガイド
   - 概要
   - Reference
@@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Transforms
 ---
 {{CSSRef}}
 
-**CSS 変換** (CSS Transforms) は CSS のモジュールの一つで、 CSS でスタイル付けされた要素をどのように二次元または三次元空間に変換できるかを定義します。
+**CSS 座標変換** (CSS Transforms) は CSS のモジュールの一つで、 CSS でスタイル付けされた要素をどのように二次元または三次元空間に座標変換できるかを定義します。
 
 ## リファレンス
 
@@ -34,12 +34,12 @@ translation_of: Web/CSS/CSS_Transforms
 
 ## ガイド
 
-- [CSS 変換の利用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
-  - : CSS でスタイル付けされた要素をどのように変換するかについての手順を追ったチュートリアルです。
+- [CSS 座標変換の利用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
+  - : CSS でスタイル付けされた要素をどのように座標変換するかについての手順を追ったチュートリアルです。
 
 ## 仕様書
 
-| 仕様書                             | 状態                            | 備考               |
-| ---------------------------------- | ------------------------------- | ------------------ |
-| {{ SpecName('CSS Transforms 2') }} | {{ Spec2('CSS Transforms 2') }} | 独立した変換を追加 |
-| {{ SpecName('CSS3 Transforms') }}  | {{ Spec2('CSS3 Transforms') }}  | 初回定義           |
+| 仕様書                             | 状態                            | 備考                   |
+| ---------------------------------- | ------------------------------- | ---------------------- |
+| {{ SpecName('CSS Transforms 2') }} | {{ Spec2('CSS Transforms 2') }} | 独立した座標変換を追加 |
+| {{ SpecName('CSS3 Transforms') }}  | {{ Spec2('CSS3 Transforms') }}  | 初回定義               |
diff --git a/files/ja/web/css/css_transforms/using_css_transforms/index.md b/files/ja/web/css/css_transforms/using_css_transforms/index.md
index 7ebaeeb3c3..ada8a2e2ca 100644
--- a/files/ja/web/css/css_transforms/using_css_transforms/index.md
+++ b/files/ja/web/css/css_transforms/using_css_transforms/index.md
@@ -1,15 +1,15 @@
 ---
-title: CSS 変換の使用
+title: CSS 座標変換の使用
 slug: Web/CSS/CSS_Transforms/Using_CSS_transforms
 tags:
   - 3D
   - Advanced
   - CSS
-  - CSS Transforms
-  - Graphics
+  - CSS 座標変換
+  - グラフィック
   - ガイド
-  - Rotate
-  - Scale
+  - 回転
+  - 拡大縮小
   - Scaling
   - perspective
   - rotation
@@ -17,24 +17,24 @@ translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
 ---
 {{CSSRef}}
 
-**CSS 変換** (transform) は、座標空間を編集することで、通常のフロー処理を混乱させずに影響下にあるコンテンツの形状や位置を変えることができます。このガイドは変換の使用についての解説を行ないます。
+**CSS 座標変換** (transform) は、座標空間を編集することで、通常のフロー処理を混乱させずに影響下にあるコンテンツの形状や位置を変えることができます。このガイドは座標変換の使用についての解説を行ないます。
 
-CSS 変換は、アフィン線形変換を HTML 要素に対して適用する一連の CSS プロパティによって実現されます。変換には、二次元と三次元空間の両方について回転 (rotation)、傾斜 (skewing)、拡大縮小 (scaling)、平行移動 (translation) があります。
+CSS 座標変換は、アフィン線形変換を HTML 要素に対して適用する一連の CSS プロパティによって実現されます。座標変換には、二次元と三次元空間の両方について回転 (rotation)、傾斜 (skewing)、拡大縮小 (scaling)、平行移動 (translation) があります。
 
 > **Warning:** [ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model)によって配置された要素に対してのみ `transform` を実行することができます。言うまでもなく、 `display: block` である要素がボックスモデルで配置されます。
 
-## CSS 変換のプロパティ
+## CSS 座標変換のプロパティ
 
-CSS 変換の定義に使われる重要なプロパティが 2 つあります。 {{cssxref("transform")}} と {{cssxref("transform-origin")}} です。
+CSS 座標変換の定義に使われる重要なプロパティが 2 つあります。 {{cssxref("transform")}} と {{cssxref("transform-origin")}} です。
 
 - {{cssxref("transform-origin")}}
-  - : 原点位置を指定します。既定では、これは要素の中央ですが、移動することができます。回転、拡大縮小や傾斜など決まった点が引数として必要な変換で使用されれます。
+  - : 原点位置を指定します。既定では、これは要素の中央ですが、移動することができます。特定の点を引数として必要とする回転、拡大縮小や傾斜などの座標変換で使用されます。
 - {{cssxref("transform")}}
-  - : 要素に適用する変換を指定します。変換の空白区切りのリストで、合成操作の要求された順番で適用されます。変換の合成は右から左の順に適用されます。
+  - : 要素に適用する座標変換を指定します。座標変換の空白区切りのリストで、合成操作の要求された順番で適用されます。座標変換の合成は右から左の順に適用されます。
 
 ## 例
 
-これが変換前の MDN ロゴの画像です。
+これが座標変換前の MDN ロゴの画像です。
 
 ![MDN ロゴ](logo.png)
 
@@ -64,15 +64,15 @@ CSS 変換の定義に使われる重要なプロパティが 2 つあります�
 
 ## 3D 特有の CSS プロパティ
 
-立体空間で CSS 変換 を行うのは、もう少し複雑になります。遠近感を与えて 3D 空間の環境設定を行うことから始める必要があり、それから 2D の要素がその空間でとる挙動を設定しなければなりません。
+立体空間で CSS 座標変換 を行うには、もう少し複雑になります。視点を与えて 3D 空間の環境設定を行うことから始める必要があり、それから 2D の要素がその空間でとる挙動を設定しなければなりません。
 
-<h3 id="Perspective">遠近感</h3>
+<h3 id="Perspective">視点</h3>
 
-設定する最初の要素は遠近感 (perspective) です。遠近感は 3D の印象を与えるものです。見る人から遠ざかるほど、ものが小さくなります。
+設定する最初の要素は視点 (perspective) です。視点は 3D の印象を与えるものです。見る人から遠ざかるほど、ものが小さくなります。
 
 {{page("/ja/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}
 
-二つ目の設定要素は見る人の位置で、 {{cssxref("perspective-origin")}} プロパティを使います。既定では遠近感は見る人の中央に合わせられますが、いつも妥当であるとは限りません。
+二つ目の設定要素は見る人の位置で、 {{cssxref("perspective-origin")}} プロパティを使います。既定では視点は見る人の中央に合わせられますが、いつも妥当であるとは限りません。
 
 {{page("/ja/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}
 
@@ -80,6 +80,6 @@ CSS 変換の定義に使われる重要なプロパティが 2 つあります�
 
 ## 関連情報
 
-- [端末の向きと 3D 変換の併用](/ja/docs/Web/Events/Using_device_orientation_with_3D_transforms)
+- [端末の向きと 3D 座標変換の併用](/ja/docs/Web/Events/Using_device_orientation_with_3D_transforms)
 - [Intro to CSS 3D transforms](http://desandro.github.com/3dtransforms/) (David DeSandro によるブログ記事)
-- [CSS Transform Playground](https://css-transform.moro.es/) (CSS 変換機能を視覚化するオンラインツール)
+- [CSS Transform Playground](https://css-transform.moro.es/) (CSS 座標変換機能を視覚化するオンラインツール)
diff --git a/files/ja/web/css/perspective-origin/index.md b/files/ja/web/css/perspective-origin/index.md
index 24882d444e..1aecc84362 100644
--- a/files/ja/web/css/perspective-origin/index.md
+++ b/files/ja/web/css/perspective-origin/index.md
@@ -5,25 +5,29 @@ tags:
   - 3D
   - CSS
   - CSS プロパティ
-  - CSS 変形
+  - CSS 座標変換
+  - グラフィック
+  - プロパティ
+  - Reference
+  - 座標変換
   - perspective
   - perspective-origin
-  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.perspective-origin
 translation_of: Web/CSS/perspective-origin
 ---
 {{CSSRef}}
 
-[CSS](/ja/docs/Web/CSS) の **`perspective-origin`** プロパティは、閲覧者の視点の位置を決めます。これは {{cssxref("perspective")}} プロパティによって<em>消失点</em>として使われます。
+[CSS](/ja/docs/Web/CSS) の **`perspective-origin`** プロパティは、閲覧者の視点の位置を決めます。これは {{cssxref("perspective")}} プロパティによって*消失点*として使われます。
 
 {{EmbedInteractiveExample("pages/css/perspective-origin.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 [https://github.com/mdn/interactive-examples](https://github.com/mdn/interactive-examples) をクローンしてプルリクエストを送信してください。</p>
+**`perspective-origin`** および {{cssxref('perspective')}} の各プロパティは、三次元空間で座標変換される子の親に設定するものであり、座標変換される要素に設定される [`perspective()`](/ja/docs/Web/CSS/transform-function/perspective()) 変換関数とは異なります。
 
-**`perspective-origin`** および {{cssxref('perspective')}} の各プロパティは、三次元空間で変換される子の親に設定するものであり、変換される要素に設定される {{cssxref("transform-function/perspective", "perspective()")}} 変換関数とは異なります。
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers">/* １値構文 */
+```css
+/* １値構文 */
 perspective-origin: x-position;
 
 /* ２値構文 */
@@ -36,220 +40,224 @@ perspective-origin: y-position x-position;
 /* グローバル値 */
 perspective-origin: inherit;
 perspective-origin: initial;
+perspective-origin: revert;
 perspective-origin: unset;
-</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-- <em>x-position</em>
- <dd><em>消失点</em>の横座標上の位置を示します。次のいずれかの値です。
- <ul>
-  <li>{{cssxref("&lt;length-percentage&gt;")}} は、絶対的な length 値、又は要素の幅に対する相対値で位置を示します。負の数も使えます。</li>
-  <li>`left` キーワードは、 length 値 `0` を示すショートカットです。</li>
-  <li>`center` キーワードは、パーセント値 `50%` を示すショートカットです。</li>
-  <li>`right` キーワードは、パーセント値 `100%` を示すショートカットです。</li>
- </ul>
- </dd>
-- <em>y-position</em>
- <dd><em>消失点</em>の縦座標上の位置を示します。次のいずれかの値です。
- <ul>
-  <li>{{cssxref("&lt;length&gt;")}} は、絶対的な length 値、又は要素の高さに対する相対値で位置を示します。負の数も使えます。</li>
-  <li>`top` キーワードは、 length 値 `0` を示すショートカットです。</li>
-  <li>`center` キーワードは、パーセント値 `50%` を示すショートカットです。</li>
-  <li>`bottom` キーワードは、パーセント値 `100%` を示すキーワードです。</li>
- </ul>
- </dd>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+```
 
-{{csssyntax}}
+### 値
 
-<h2 id="Examples" name="Examples">例</h2>
+- _x-position_
 
-<h3 id="Changing_the_perspective_origin" name="Changing_the_perspective_origin">視点の変更</h3>
+  - : *消失点*の横座標上の位置を示します。次のいずれかの値です。
 
-この例は主要な `perspective-origin` 値で立方体を表示します。
+    - {{cssxref("&lt;length-percentage&gt;")}} は、絶対的な length 値、または要素の幅に対する相対値で位置を示します。負の数も使えます。
+    - `left` キーワードは、length 値 `0` を示すショートカットです。
+    - `center` キーワードは、パーセント値 `50%` を示すショートカットです。
+    - `right` キーワードは、パーセント値 `100%` を示すショートカットです。
 
-<h4 id="Result" name="Result">結果</h4>
+- _y-position_
 
-{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}}
+  - : *消失点*の縦座標上の位置を示します。次のいずれかの値です。
+
+    - {{cssxref("&lt;length-percentage&gt;")}} は、絶対的な length 値、または要素の高さに対する相対値で位置を示します。負の数も使えます。
+    - `top` キーワードは、 length 値 `0` を示すショートカットです。
+    - `center` キーワードは、パーセント値 `50%` を示すショートカットです。
+    - `bottom` キーワードは、パーセント値 `100%` を示すキーワードです。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
 
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;section&gt;
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: top left;&lt;/code&gt;&lt;/caption&gt;
-    &lt;div class="container"&gt;
-    &lt;div class="cube potl"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: top;&lt;/code&gt;&lt;/caption&gt;
-   &lt;div class="container"&gt;
-    &lt;div class="cube potm"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: top right;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube potr"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: left;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube poml"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: 50% 50%;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube pomm"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: right;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube pomr"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom left;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube pobl"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube pobm"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom right;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube pobr"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: -200% -200%;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube po200200neg"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: 200% 200%;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube po200200pos"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: 200% -200%;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube po200200"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;/section&gt;
-</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css">/* perspective-origin の値 (例ごとに異なる) */
+## 例
+
+<h3 id="Changing_the_perspective_origin">視点の変更</h3>
+
+この例は主要な `perspective-origin` 値で立方体を表示します。
+
+#### HTML
+
+```html
+<section>
+
+<figure>
+  <figcaption><code>perspective-origin: top left;</code></figcaption>
+    <div class="container">
+     <div class="cube potl">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+     </div>
+    </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: top;</code></figcaption>
+   <div class="container">
+    <div class="cube potm">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: top right;</code></figcaption>
+  <div class="container">
+    <div class="cube potr">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: left;</code></figcaption>
+  <div class="container">
+    <div class="cube poml">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: 50% 50%;</code></figcaption>
+  <div class="container">
+    <div class="cube pomm">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: right;</code></figcaption>
+  <div class="container">
+    <div class="cube pomr">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: bottom left;</code></figcaption>
+  <div class="container">
+    <div class="cube pobl">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: bottom;</code></figcaption>
+  <div class="container">
+    <div class="cube pobm">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: bottom right;</code></figcaption>
+  <div class="container">
+    <div class="cube pobr">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: -200% -200%;</code></figcaption>
+  <div class="container">
+    <div class="cube po200200neg">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: 200% 200%;</code></figcaption>
+  <div class="container">
+    <div class="cube po200200pos">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: 200% -200%;</code></figcaption>
+  <div class="container">
+    <div class="cube po200200">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+</section>
+```
+
+#### CSS
+
+```css
+/* perspective-origin の値 (例ごとに異なる) */
 .potl {
   perspective-origin: top left;
 }
@@ -351,41 +359,25 @@ section {
   text-align: left;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-}</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+}
+```
 
-{{cssinfo}}
+#### 結果
+
+{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}}
+
+## 仕様書
+
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<div>
-{{Compat("css.properties.perspective-origin")}}
-</div>
+{{Compat}}
 
 ## 関連情報
 
-<ul>
- <li>[CSS 変形の利用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)</li>
- <li>{{cssxref('transform-style')}}</li>
- <li>{{cssxref('transform-function')}}</li>
- <li>{{cssxref('perspective')}}</li>
- <li>`[transform: perspective()](/ja/docs/Web/CSS/transform-function/perspective)` 関数</li>
-</ul>
+- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
+- {{cssxref('transform-style')}}
+- {{cssxref('transform-function')}}
+- {{cssxref('perspective')}}
+- [`transform: perspective()`](/ja/docs/Web/CSS/transform-function/perspective()) 関数
diff --git a/files/ja/web/css/perspective/index.md b/files/ja/web/css/perspective/index.md
index 4adb05e7ef..220db45b10 100644
--- a/files/ja/web/css/perspective/index.md
+++ b/files/ja/web/css/perspective/index.md
@@ -2,144 +2,154 @@
 title: perspective
 slug: Web/CSS/perspective
 tags:
+  - 3D
   - CSS
   - CSS プロパティ
-  - CSS 変形
-  - Reference
+  - CSS 座標変換
+  - 距離
   - グラフィック
   - プロパティ
-  - 距離
+  - Reference
+  - perspective
+  - recipe:css-property
+browser-compat: css.properties.perspective
 translation_of: Web/CSS/perspective
 ---
 {{CSSRef}}
 
-<span class="seoSummary">**`perspective`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 z=0 の平面とユーザーとの間の距離を定めて三次元に配置された要素に遠近感を与えます。</span> z&gt;0 である三次元要素はより大きく、 z&lt;0 である三次元要素はより小さくなります。効果の強度はこのプロパティの値から決められます。
+**`perspective`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 z=0 の平面とユーザーとの間の距離を定めて三次元に配置された要素に遠近感を与えます。
 
 {{EmbedInteractiveExample("pages/css/perspective.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 [https://github.com/mdn/interactive-examples](https://github.com/mdn/interactive-examples) をクローンしてプルリクエストを送信してください。</p>
-
-ユーザーの背後にある 3D 要素の部品、つまり z 軸座標が CSS の `perspective` プロパティの値より大きい要素は描画されません。
-
-<em>消失点</em>は既定で要素の中心に置かれますが、この位置は {{cssxref("perspective-origin")}} プロパティで変更できます。
-
-このプロパティを `0` と `none` 以外の値で使用すると、新たな[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)を生成します。また、その場合、オブジェクトはそれを含む `position: fixed` の要素の包含ブロックとして動作します。
-
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: css">/* キーワード値 */
+```css
+/* キーワード値 */
 perspective: none;
 
-/* &lt;length&gt; 値 */
+/* <length> 値 */
 perspective: 20px;
 perspective: 3.5em;
 
 /* グローバル値 */
 perspective: inherit;
 perspective: initial;
+perspecive: revert;
 perspective: unset;
-</pre>
+```
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
 - `none`
-  - : 立体的な変形を一切適用しないことを示すキーワードです。
+  - : 立体的な座標変換を一切適用しないことを示すキーワードです。
 - `&lt;length&gt;`
-  - : ユーザーと z=0 平面間の距離を表す {{cssxref("&lt;length&gt;")}} です。立体的な変形を要素とその内容に適用するときに使います。 `0` や負の値ならば、立体的な変形は適用されません。
+  - : ユーザーと z=0 平面間の距離を表す {{cssxref("&lt;length&gt;")}} です。立体的な座標変換を要素とその内容に適用するときに使います。 `0` や負の値ならば、立体的な座標変換は適用されません。
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 解説
 
-{{csssyntax}}
+z>0 である三次元要素はより大きく、 z<0 である三次元要素はより小さくなります。効果の強度はこのプロパティの値から決められます。
 
-<h2 id="Examples" name="Examples">例</h2>
+ユーザーの背後にある 3D 要素の部品、つまり z 軸座標が CSS の `perspective` プロパティの値より大きい要素は描画されません。
 
-<h3 id="Setting_perspective" name="Setting_perspective">視点の設定</h3>
+*消失点*は既定で要素の中心に置かれますが、この位置は {{cssxref("perspective-origin")}} プロパティで変更できます。
 
-この例は様々な位置に視点が設定された立方体を表示します。どのように立方体が早く縮まるかは、 {{ cssxref("perspective") }} プロパティで定義されます。小さい値ほど、視点は近くなります。
+このプロパティを `0` と `none` 以外の値で使用すると、新たな[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)を生成します。また、その場合、オブジェクトはそれを含む `position: fixed` の要素の包含ブロックとして動作します。
 
-<h4 id="Result" name="Result">結果</h4>
+## 公式定義
 
-{{EmbedLiveSample('Setting_perspective', 660, 700)}}
+{{cssinfo}}
 
-<h4 id="HTML">HTML</h4>
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+<h3 id="Setting_perspective">視点の設定</h3>
+
+この例は様々な位置に視点が設定された立方体を表示します。どのように立方体が早く縮まるかは、 {{ cssxref("perspective") }} プロパティで定義されます。小さい値ほど、視点は近くなります。
+
+#### HTML
 
 以下の HTML は、４つの同じボックスのコピーを、様々な値の視点を設定して作成します。
 
-<pre class="brush: html">&lt;table&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;th&gt;&lt;code&gt;perspective: 250px;&lt;/code&gt;
-      &lt;/th&gt;
-      &lt;th&gt;&lt;code&gt;perspective: 350px;&lt;/code&gt;
-      &lt;/th&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;
-        &lt;div class="container"&gt;
-          &lt;div class="cube pers250"&gt;
-            &lt;div class="face front"&gt;1&lt;/div&gt;
-            &lt;div class="face back"&gt;2&lt;/div&gt;
-            &lt;div class="face right"&gt;3&lt;/div&gt;
-            &lt;div class="face left"&gt;4&lt;/div&gt;
-            &lt;div class="face top"&gt;5&lt;/div&gt;
-            &lt;div class="face bottom"&gt;6&lt;/div&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/td&gt;
-      &lt;td&gt;
-        &lt;div class="container"&gt;
-          &lt;div class="cube pers350"&gt;
-            &lt;div class="face front"&gt;1&lt;/div&gt;
-            &lt;div class="face back"&gt;2&lt;/div&gt;
-            &lt;div class="face right"&gt;3&lt;/div&gt;
-            &lt;div class="face left"&gt;4&lt;/div&gt;
-            &lt;div class="face top"&gt;5&lt;/div&gt;
-            &lt;div class="face bottom"&gt;6&lt;/div&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;th&gt;&lt;code&gt;perspective: 500px;&lt;/code&gt;
-      &lt;/th&gt;
-      &lt;th&gt;&lt;code&gt;perspective: 650px;&lt;/code&gt;
-      &lt;/th&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;
-        &lt;div class="container"&gt;
-          &lt;div class="cube pers500"&gt;
-            &lt;div class="face front"&gt;1&lt;/div&gt;
-            &lt;div class="face back"&gt;2&lt;/div&gt;
-            &lt;div class="face right"&gt;3&lt;/div&gt;
-            &lt;div class="face left"&gt;4&lt;/div&gt;
-            &lt;div class="face top"&gt;5&lt;/div&gt;
-            &lt;div class="face bottom"&gt;6&lt;/div&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/td&gt;
-      &lt;td&gt;
-        &lt;div class="container"&gt;
-          &lt;div class="cube pers650"&gt;
-            &lt;div class="face front"&gt;1&lt;/div&gt;
-            &lt;div class="face back"&gt;2&lt;/div&gt;
-            &lt;div class="face right"&gt;3&lt;/div&gt;
-            &lt;div class="face left"&gt;4&lt;/div&gt;
-            &lt;div class="face top"&gt;5&lt;/div&gt;
-            &lt;div class="face bottom"&gt;6&lt;/div&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<h4 id="CSS">CSS</h4>
+```html
+<table>
+  <tbody>
+    <tr>
+      <th><code>perspective: 250px;</code>
+      </th>
+      <th><code>perspective: 350px;</code>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube pers250">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pers350">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>perspective: 500px;</code>
+      </th>
+      <th><code>perspective: 650px;</code>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube pers500">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pers650">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+```
+
+#### CSS
 
 様々な距離の遠近法を設定するために使用することができる CSS のクラスです。コンテナーボックスや立方体自身、それぞれの面のためのクラスも含みます。
 
-<pre class="brush: css">/* さまざまな perspective の値のためのショートハンドクラス */
+```css
+/* さまざまな perspective の値のためのショートハンドクラス */
 .pers250 {
   perspective: 250px;
 }
@@ -222,36 +232,22 @@ th, p, td {
   background-color: #EEEEEE;
   padding: 10px;
   font-family: sans-serif;
-   text-align: left;
-}</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{Specname('CSS Transforms 2', '#propdef-perspective', 'perspective')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>初回定義。</td>
-  </tr>
- </tbody>
-</table>
+  text-align: left;
+}
+```
 
-{{cssinfo}}
+#### 結果
+
+{{EmbedLiveSample('Setting_perspective', 660, 700)}}
+
+## 仕様書
+
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## ブラウザーの互換性
 
-{{Compat("css.properties.perspective")}}
+{{Compat}}
 
 ## 関連情報
 
-<ul>
- <li>[CSS 変形の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)</li>
-</ul>
+- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
diff --git a/files/ja/web/css/rotate/index.md b/files/ja/web/css/rotate/index.md
index 5bb85884ad..4686d963bc 100644
--- a/files/ja/web/css/rotate/index.md
+++ b/files/ja/web/css/rotate/index.md
@@ -3,18 +3,24 @@ title: rotate
 slug: Web/CSS/rotate
 tags:
   - CSS
-  - CSS Property
+  - CSS プロパティ
   - Reference
-  - Transforms
+  - 回転
+  - 座標変換
+  - angle
+  - recipe:css-property
+  - rotation
+browser-compat: css.properties.rotate
 translation_of: Web/CSS/rotate
 ---
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
 
-[CSS](/ja/docs/Web/CSS) の **`rotate`** プロパティは、 {{CSSxRef("transform")}} とは個別に独立して回転変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 `transform` の値で変形関数を指定する実際の順序を覚えておく手間を軽減します。
+**`rotate`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{CSSxRef("transform")}} とは個別に独立して回転変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 `transform` の値で変形関数を指定する実際の順序を覚えておく手間を軽減します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: css">/* キーワード値 */
+```css
+/* キーワード値 */
 rotate: none;
 
 /* 角度値 */
@@ -27,36 +33,51 @@ rotate: x 90deg;
 rotate: y 0.25turn;
 rotate: z 1.57rad;
 
-/* ベクトルと角度の値 */
-rotate: 1 1 1 90deg;</pre>
+/* ベクトルと角度値 */
+rotate: 1 1 1 90deg;
 
-<h3 id="Values" name="Values">値</h3>
+/* グローバル値 */
+rotate: inherit;
+rotate: initial;
+rotate: revert;
+rotate: unset;
+```
+
+### 値
 
 - 角度値
-  - : {{CSSxRef("&lt;angle&gt;")}} で、 z 軸の周囲を該当する要素を貫いて回転させる角度を指定します。`rotate()` (2次元回転) 関数と等価です。
+  - : {{CSSxRef("&lt;angle&gt;")}} で、 z 軸の周囲を該当する要素を貫いて回転させる角度を指定します。`rotate()` (二次元回転) 関数と等価です。
 - x, y, z 軸と角度値
-  - : 該当する要素を回転する軸の名前 (`"x"`, "`y`", "`z"`) と、要素を貫いて回転する角度を指定する {{CSSxRef("&lt;angle&gt;")}} です。 `rotateX()`/`rotateY()`/`rotateZ()` (3次元回転) 関数と等価です。
+  - : 該当する要素を回転する軸の名前 (`"x"`, "`y`", "`z"`) と、要素を貫いて回転する角度を指定する {{CSSxRef("&lt;angle&gt;")}} です。 `rotateX()`/`rotateY()`/`rotateZ()` (三次元回転) 関数と等価です。
 - ベクトルと角度値
-  - : 要素を回転させたい直線を表す原点を中心としたベクトルを表す三つの数値 {{CSSxRef("&lt;number&gt;")}} と、要素を貫いて回転する角度を指定する {{CSSxRef("&lt;angle&gt;")}} です。 `rotate3d()` (3次元回転) 関数と等価です。
- <dt id="none">`none`</dt>
+  - : 要素を回転させたい直線を表す原点を中心としたベクトルを表す 3 つの数値 {{CSSxRef("&lt;number&gt;")}} と、要素を貫いて回転する角度を指定する {{CSSxRef("&lt;angle&gt;")}} です。 `rotate3d()` (三次元回転) 関数と等価です。
+- `none`
   - : 回転を適用しないことを表します。
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
-{{CSSSyntax}}
+{{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="HTML">HTML</h3>
+<h3 id="Rotate_an_element_on_hover">ホバー時に要素を回転</h3>
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="rotate"&gt;Rotation&lt;/p&gt;
-&lt;/div&gt;</pre>
+#### HTML
+
+```html
+<div>
+  <p class="rotate">Rotation</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+#### CSS
 
-<div class="hidden">
-<pre class="brush: css">* {
+```css hidden
+* {
   box-sizing: border-box;
 }
 
@@ -77,42 +98,34 @@ p {
   font-size: 1.2rem;
   text-align: center;
 }
-</pre>
-</div>
+```
 
-<pre class="brush: css">.rotate {
+```css
+.rotate {
   transition: rotate 1s;
 }
 
 div:hover .rotate {
   rotate: 1 -0.5 1 180deg;
-}</pre>
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Rotate_an_element_on_hover")}}
 
-<h3 id="Result" name="Result">結果</h3>
+## 仕様書
 
-{{EmbedLiveSample("Examples")}}
+{{Specifications}}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## ブラウザーの互換性
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{Compat}}
 
-{{CSSInfo}}
+## 関連情報
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+- {{cssxref('translate')}}
+- {{cssxref('scale')}}
+- {{cssxref('transform')}}
 
-{{Compat("css.properties.rotate")}}
+メモ: `skew` には独立した `transform` の値はありません
diff --git a/files/ja/web/css/scale/index.md b/files/ja/web/css/scale/index.md
index 19f527c1b8..6c67160e65 100644
--- a/files/ja/web/css/scale/index.md
+++ b/files/ja/web/css/scale/index.md
@@ -3,65 +3,77 @@ title: scale
 slug: Web/CSS/scale
 tags:
   - CSS
-  - CSS Property
+  - CSS プロパティ
   - Reference
-  - Transforms
-  - 'recipe:css-property'
+  - 座標変換
+  - recipe:css-property
+browser-compat: css.properties.scale
 translation_of: Web/CSS/scale
 ---
 {{CSSRef}}
 
-**`scale`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{CSSxRef("transform")}} とは個別に独立して倍率変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 `transform` の値で変換関数を指定する実際の順序を思い出す手間を軽減します。
+**`scale`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{CSSxRef("transform")}} とは個別に独立しての拡大縮小変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 `transform` の値で座標変換関数を指定する実際の順序を思い出す手間を軽減します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: css notranslate">/* キーワード値 */
+```css
+/* キーワード値 */
 scale: none;
 
-/* １つの値 */
-/* 1より大きい値で要素を拡大 */
+/* 1 つの値 */
+/* 1 より大きい値で要素を拡大 */
 scale: 2;
-/* 1より小さい値で要素を縮小 */
+/* 1 より小さい値で要素を縮小 */
 scale: 0.5;
 
-/* ２つの値 */
+/* 2 つの値 */
 scale: 2 0.5;
 
-/* ３つの値 */
-scale: 2 0.5 2;</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-- １つの数値
-  - : 該当する要素の拡大率を指定する {{CSSxRef("&lt;number&gt;")}} であり、 X 及び Y 軸で同じ倍率になります。 `scale()` (2D 倍率) 関数に１つの値を指定した場合と等価です。
-- ２つの長さ/パーセント値
-  - : ２つの {{CSSxRef("&lt;number&gt;")}} 値で、 2D 倍率における X 軸と Y 軸の拡大率を (それぞれ) 指定します。 `scale()` (2D 倍率) 関数に２つの値を指定した場合と等価です。
-- ３つの長さ/パーセント値
-  - : ３つの {{CSSxRef("&lt;number&gt;")}} 値で、 3D 倍率における X 軸と Y 軸と Z 軸の拡大率を (それぞれ) 指定します。 `translate3d()` (3D 倍率) 関数と等価です。
- <dt id="none">`none`</dt>
+/* 3 つの値 */
+scale: 2 0.5 2;
+
+/* グローバル値 */
+scale: inherit;
+scale: initial;
+scale: revert;
+scale: unset;
+```
+
+### 値
+
+- 1 つの数値
+  - : 該当する要素の拡大率を指定する {{CSSxRef("&lt;number&gt;")}} であり、 X および Y 軸で同じの拡大縮小になります。 `scale()` (2D の拡大縮小) 関数に 1 つの値を指定した場合と等価です。
+- 2 つの長さ/パーセント値
+  - : 2 つの {{CSSxRef("&lt;number&gt;")}} 値で、2D の拡大縮小における X 軸と Y 軸の拡大率を (それぞれ) 指定します。 `scale()` (2D の拡大縮小) 関数に 2 つの値を指定した場合と等価です。
+- 3 つの長さ/パーセント値
+  - : 3 つの {{CSSxRef("&lt;number&gt;")}} 値で、3D の拡大縮小における X 軸と Y 軸と Z 軸の拡大率を (それぞれ) 指定します。 `scale3d()` (3D の拡大縮小) 関数と等価です。
+- `none`
   - : 拡大率が適用されないことを示します。
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
 {{cssinfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Scaling_an_element_on_hover" name="Scaling_an_element_on_hover">上に乗った際の要素の拡大Scaling an element on hover</h3>
+<h3 id="Scaling_an_element_on_hover">上に乗った際の要素の拡大</h3>
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;div&gt;
-  &lt;p class="scale"&gt;Scaling&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div>
+  <p class="scale">Scaling</p>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css notranslate">* {
+```css
+* {
   box-sizing: border-box;
 }
 
@@ -90,41 +102,24 @@ p {
 div:hover .scale {
   scale: 2 0.7;
 }
-</pre>
+```
 
-<h4 id="Result" name="Result">結果</h4>
+#### Result
 
 {{EmbedLiveSample("Scaling_an_element_on_hover")}}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Transforms 2", "#individual-transforms", "individual transforms")}}</td>
-   <td>{{Spec2("CSS Transforms 2")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-{{Compat("css.properties.scale")}}
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
 
 ## 関連情報
 
-<ul>
- <li>{{cssxref('translate')}}</li>
- <li>{{cssxref('rotate')}}</li>
- <li>{{cssxref('transform')}}</li>
-</ul>
+- {{cssxref('translate')}}
+- {{cssxref('rotate')}}
+- {{cssxref('transform')}}
 
-注: skew は独立した変形値ではありません
+メモ: `skew` には独立した `transform` の値はありません
diff --git a/files/ja/web/css/transform-origin/index.md b/files/ja/web/css/transform-origin/index.md
index e7bb375699..1418eb51a2 100644
--- a/files/ja/web/css/transform-origin/index.md
+++ b/files/ja/web/css/transform-origin/index.md
@@ -3,41 +3,45 @@ title: transform-origin
 slug: Web/CSS/transform-origin
 tags:
   - CSS
-  - CSS Property
-  - CSS Transforms
+  - CSS プロパティ
+  - CSS 座標変換
   - Reference
   - 'default value: center'
-  - 'recipe:css-property'
+  - recipe:css-property
   - transform-origin
+browser-compat: css.properties.transform-origin
 translation_of: Web/CSS/transform-origin
 ---
 {{ CSSRef }}
 
-**`transform-origin`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の<ruby>変形<rp> (</rp><rt>transform</rt><rp>) </rp></ruby>における原点を設定します。
+**`transform-origin`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の座標変換 (transform) における原点を設定します。
 
 {{EmbedInteractiveExample("pages/css/transform-origin.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 [https://github.com/mdn/interactive-examples](https://github.com/mdn/interactive-examples) をクローンしてプルリクエストを送信してください。</p>
+座標変換の原点とは、それを中心に座標変換が適用される点です。例えば、 `[rotate()](/ja/docs/Web/CSS/transform-function/rotate)` 関数における座標変換の原点は、回転の中心です。
 
-変形の原点とは、それを中心に変形が適用される点です。例えば、 `[rotate()](/ja/docs/Web/CSS/transform-function/rotate)` 関数における変形の原点は、回転の中心です。
+実際には、このプロパティは一対の座標変換で、その要素の他の座標変換の周りを囲みます。最初の座標変換は、原点を真の原点である <math><mrow><mo stretchy="false">(</mo><mn>0</mn><mo>,</mo><mn>0</mn><mo stretchy="false">)</mo></mrow></math> に移動させます。その後、他の座標変換が適用されますが、座標変換の原点は <math><mrow><mo stretchy="false">(</mo><mn>0</mn><mo>,</mo><mn>0</mn><mo stretchy="false">)</mo></mrow></math> にあるので、これらの座標変換はその原点の周りで作用します。最後に逆方向の変換を行い，座標変換の原点を元の位置に戻します。したがって，この定義は 次のようになります。
 
-<p>このプロパティは最初にプロパティ値の反対に平行移動し、それから要素の変形を適用し、プロパティ値の分だけ平行移動する形でで適用されます。<br>
- すなわち、</p>
-
-<pre class="brush: css notranslate">transform-origin: -100% 50%;
+```css
+transform-origin: -100% 50%;
 transform: rotate(45deg);
-</pre>
+```
 
-この定義は以下の変形と同じです。
+この定義は以下の座標変換と同じです。
+
+```css
+transform-origin: 0 0;
+transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);
+```
 
-<pre class="brush: css notranslate">transform-origin: 0 0;
-transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);</pre>
+右から左に読むと、`translate(100%, -50%)` は変換の原点を進の原点に移動するもので、`rotate(45deg)` は本来の座標変換であり、`translate(-100%, 50%)` は変換の原点をもとの場所に戻す変換です。
 
-既定で、変形の原点は `center` です。
+既定で、座標変換の原点は `center` です。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: css notranslate">/* 値１つの構文 */
+```css
+/* 値１つの構文 */
 transform-origin: 2px;
 transform-origin: bottom;
 
@@ -68,407 +72,255 @@ transform-origin: bottom right 2cm;
 /* グローバル値 */
 transform-origin: inherit;
 transform-origin: initial;
+transform-origin: revert;
 transform-origin: unset;
-</pre>
+```
+
+`transform-origin` プロパティは、オフセットを表す 1 ～ 3 つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する[初期値](/ja/docs/Web/CSS/initial_value)にリセットされます。
+
+単一の {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} が定義された場合、これは水平方向のオフセットを表します。
+
+2 つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが `center` だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。
+
+- 値 1 つの構文:
+
+  - 値は {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, または `left`, `center`, `right`, `top`, `bottom` のいずれかでなければなりません。
+
+- 値 2 つの構文:
+
+  - 一方の値は {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, またはキーワードの `left`, `center`, `right` のいずれかでなければなりません。
+  - もう一方の値は、 {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, またはキーワードの `top`, `center`, `bottom` のいずれかでなければなりません。
+
+- 値 3 つの構文:
+
+  - 1 番目と 2 番目の値は、値 2 つの構文と同じです。
+  - 3 番目の値は {{cssxref("&lt;length&gt;")}} でなければなりません。これは常に Z オフセットを表します。
 
-`transform-origin` プロパティは、オフセットを表す１～３つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する[初期値](/ja/docs/Web/CSS/initial_value)にリセットされます。
-
-２つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが `center` だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。
-
-<ul>
- <li>値１つの構文:
-  <ul>
-   <li>値は {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, 又は `left`, `center`, `right`, `top`, `bottom` のうちの１つでなければなりません。</li>
-  </ul>
- </li>
- <li>値２つの構文:
-  <ul>
-   <li>一方の値は {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, 又はキーワードの `left`, `center`, `right` のうちの１つでなければなりません。</li>
-   <li>もう一方の値は、 {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, 又はキーワードの `top`, `center`, `bottom` のうちの１つでなければなりません。</li>
-  </ul>
- </li>
- <li>値３つの構文:
-  <ul>
-   <li>１番目と２番目の値は、値２つの構文と同じです。</li>
-   <li>３番目の値は {{cssxref("&lt;length&gt;")}} でなければなりません。これは常に Z オフセットを表します。</li>
-  </ul>
- </li>
-</ul>
-
-<h3 id="Values" name="Values">値</h3>
-
-- <var>x-offset</var>
-  - : {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} の、ボックスの左端から変形の原点までの距離を示す値です。
-- <var>offset-keyword</var>
+### 値
+
+- _x-offset_
+  - : {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} の、ボックスの左端から座標変換の原点までの距離を示す値です。
+- _offset-keyword_
   - : `left`, `right`, `top`, `bottom`, `center` のいずれかのキーワードで、対応するオフセットを表します。
-- <var>y-offset</var>
-  - : {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} の、ボックスの右端から変形の原点までの距離を示す値です。
-- <var>x-offset-keyword</var>
-  - : `left`, `right`, `center` のいずれかのキーワードで、ボックスの左端から変形の原点までの距離を示します。
-- <var>y-offset-keyword</var>
-  - : `top`, `bottom`, `center` のいずれかのキーワードで、ボックスの上端から変形の原点までの距離を示します。
-- <var>z-offset</var>
+- _y-offset_
+  - : {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} の、ボックスの右端から座標変換の原点までの距離を示す値です。
+- _x-offset-keyword_
+  - : `left`, `right`, `center` のいずれかのキーワードで、ボックスの左端から座標変換の原点までの距離を示します。
+- _y-offset-keyword_
+  - : `top`, `bottom`, `center` のいずれかのキーワードで、ボックスの上端から座標変換の原点までの距離を示します。
+- _z-offset_
   - : {{cssxref("&lt;length&gt;")}} 値 ({{cssxref("&lt;percentage&gt;")}} を指定すると文が無効になります) で、ユーザーの視点と z=0 原点の距離を示します。
 
-キーワードは便利な速記であり、次の {{cssxref("&lt;percentage&gt;")}} 値に相当します。
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">キーワード</th>
-   <th scope="col">値</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>`left`</td>
-   <td>`0%`</td>
-  </tr>
-  <tr>
-   <td>`center`</td>
-   <td>`50%`</td>
-  </tr>
-  <tr>
-   <td>`right`</td>
-   <td>`100%`</td>
-  </tr>
-  <tr>
-   <td>`top`</td>
-   <td>`0%`</td>
-  </tr>
-  <tr>
-   <td>`bottom`</td>
-   <td>`100%`</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+キーワードは便利な速記形であり、次の {{cssxref("&lt;percentage&gt;")}} 値に相当します。
+
+| Keyword  | Value  |
+| -------- | ------ |
+| `left`   | `0%`   |
+| `center` | `50%`  |
+| `right`  | `100%` |
+| `top`    | `0%`   |
+| `bottom` | `100%` |
+
+## 公式定義
 
 {{CSSInfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+> **Note:** `transform-origin` の初期値は、ルートの `<svg>` 要素と [foreignObject](/ja/docs/Web/SVG/Element/foreignObject) の直接の子である `<svg>` 要素を除いたすべての SVG 要素では `0 0` です。また、 `transform-origin` は他の CSS 要素と同様に `50% 50%` です。詳しくは [SVG transform-origin](/ja/docs/Web/SVG/Attribute/transform-origin) 属性を参照してください。
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>コード</th>
-   <th>サンプル</th>
-  </tr>
-  <tr>
-   <td>
-    `transform: none;`
-   </td>
-   <td>
-    <div class="hidden" id="transform_none">
-    <pre class="brush: html notranslate">
-&lt;div class="box1"&gt;&amp;nbsp;&lt;/div&gt;
-</pre>
+## 例
 
-    <pre class="brush: css notranslate">
-.box1 {
-margin: 0.5em;
-width: 3em;
-height: 3em;
-border: solid 1px;
-background-color: palegreen;
+<h3 id="A_demonstration_of_various_transform_values">様々な変換値のデモ</h3>
+
+この例は、様々な変換関数で様々なt `transform-origin` の値を選択した場合の効果を表します。
+
+```html hidden
+<div class="container">
+
+<div class="example">
+  <div class="box box1">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
+
+<pre>
 transform: none;
--webkit-transform: none;
-}
 </pre>
-    </div>
-
-    {{EmbedLiveSample('transform_none', '', 120, '', '', 'no-button') }}
-   </td>
-  </tr>
-  <tr>
-   <td>
-    `transform: rotate(30deg);`
-   </td>
-   <td>
-    <div class="hidden" id="transform_rotate_only">
-    <pre class="brush: html notranslate">
-&lt;div class="box2"&gt;&amp;nbsp;&lt;/div&gt;
+
+<div class="example">
+  <div class="box box2">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
+
+<pre>
+transform: rotate(30deg);
 </pre>
 
-    <pre class="brush: css notranslate">
-.box2 {
-margin: 0.5em;
-width: 3em;
-height: 3em;
-border: solid 1px;
-background-color: palegreen;
+<div class="example">
+  <div class="box box3">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
+
+<pre>
 transform: rotate(30deg);
--webkit-transform: rotate(30deg);
-}
+transform-origin: 0 0;
 </pre>
-    </div>
-
-    {{EmbedLiveSample('transform_rotate_only', '', 120, '', '', 'no-button') }}
-   </td>
-  </tr>
-  <tr>
-   <td>
-    <p><code>transform: rotate(30deg);<br>
-     transform-origin: 0 0;</code></p>
-   </td>
-   <td>
-    <div class="hidden" id="transform_rotate">
-    <pre class="brush: html notranslate">
-&lt;div class="box3"&gt;&amp;nbsp;&lt;/div&gt;
+
+<div class="example">
+  <div class="box box4">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
+
+<pre>
+transform: rotate(30deg);
+transform-origin: 100% 100%;
 </pre>
 
-    <pre class="brush: css notranslate">
-.box3 {
-margin: 0.5em;
-width: 3em;
-height: 3em;
-border: solid 1px;
-background-color: palegreen;
-transform-origin: 0 0;
--webkit-transform-origin: 0 0;
+<div class="example">
+  <div class="box box5">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
+
+<pre>
 transform: rotate(30deg);
--webkit-transform: rotate(30deg);
-}
+transform-origin: -1em -3em;
 </pre>
-    </div>
-
-    {{EmbedLiveSample('transform_rotate', '', 120, '', '', 'no-button') }}
-   </td>
-  </tr>
-  <tr>
-   <td>
-    <p><code>transform: rotate(30deg);<br>
-     transform-origin: 100% 100%;</code></p>
-   </td>
-   <td>
-    <div class="hidden" id="transform_rotate_with_percentage">
-    <pre class="brush: html notranslate">
-&lt;div class="box4"&gt;&amp;nbsp;&lt;/div&gt;
+
+<div class="example">
+  <div class="box box6">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
+
+<pre>
+transform: scale(1.7);
 </pre>
 
-    <pre class="brush: css notranslate">
-.box4 {
-margin: 0.5em;
-width: 3em;
-height: 3em;
-border: solid 1px;
-background-color: palegreen;
-transform-origin: 100% 100%;
--webkit-transform-origin: 100% 100%;
-transform: rotate(30deg);
--webkit-transform: rotate(30deg);
-}
+<div class="example">
+  <div class="box box7">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
+
+<pre>
+transform: scale(1.7);
+transform-origin: 0 0;
 </pre>
-    </div>
-
-    {{EmbedLiveSample('transform_rotate_with_percentage', '', 120, '', '', 'no-button') }}
-   </td>
-  </tr>
-  <tr>
-   <td>
-    <p><code>transform: rotate(30deg);<br>
-     transform-origin: -1em -3em;</code></p>
-   </td>
-   <td>
-    <div class="hidden" id="transform_rotate_with_em">
-    <pre class="brush: html notranslate">
-&lt;div class="box5"&gt;&amp;nbsp;&lt;/div&gt;
+
+<div class="example">
+  <div class="box box8">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
+
+<pre>
+transform: scale(1.7);
+transform-origin: 100% -30%;
 </pre>
 
-    <pre class="brush: css notranslate">
-.box5 {
-margin: 0.5em;
-width: 3em;
-height: 3em;
-border: solid 1px;
-background-color: palegreen;
-transform-origin: -1em -3em;
--webkit-transform-origin: -1em -3em;
-transform: rotate(30deg);
--webkit-transform: rotate(30deg);
-}
+<div class="example">
+  <div class="box box9">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
+
+<pre>
+transform: skewX(50deg);
+transform-origin: 100% -30%;
 </pre>
-    </div>
-
-    {{EmbedLiveSample('transform_rotate_with_em', '', 120, '', '', 'no-button') }}
-   </td>
-  </tr>
-  <tr>
-   <td>
-    `transform: scale(1.7);`
-   </td>
-   <td>
-    <div class="hidden" id="transform_scale_only">
-    <pre class="brush: html notranslate">
-&lt;div class="box6"&gt;&amp;nbsp;&lt;/div&gt;
+
+<div class="example">
+  <div class="box box10">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
+
+<pre>
+transform: skewY(50deg);
+transform-origin: 100% -30%;
 </pre>
 
-    <pre class="brush: css notranslate">
+</div>
+```
+
+```css hidden
+.container {
+  display: grid;
+  grid-template-columns: 200px 100px;
+  gap: 20px;
+}
+
+.example {
+  position: relative;
+  margin: 0 2em 4em 5em;
+}
+
+.box {
+  display: inline-block;
+  width: 3em;
+  height: 3em;
+  border: solid 1px;
+  background-color: palegreen;
+}
+
+.original {
+  position: absolute;
+  left: 0;
+  opacity: 20%;
+}
+
+.box1 {
+  transform: none;
+}
+
+.box2 {
+  transform: rotate(30deg);
+}
+
+.box3 {
+  transform: rotate(30deg);
+  transform-origin: 0 0;
+}
+
+.box4 {
+  transform: rotate(30deg);
+  transform-origin: 100% 100%;
+}
+
+.box5 {
+  transform: rotate(30deg);
+  transform-origin: -1em -3em;
+}
+
 .box6 {
-margin: 0.5em;
-width: 3em;
-height: 3em;
-border: solid 1px;
-background-color: palegreen;
-transform: scale(`1.7`);
--webkit-transform: scale(`1.7`);
+  transform: scale(1.7);
 }
-</pre>
-    </div>
-
-    {{EmbedLiveSample('transform_scale_only', '', 120, '', '', 'no-button') }}
-   </td>
-  </tr>
-  <tr>
-   <td>
-    <p><code>transform: scale(1.7);<br>
-     transform-origin: 0 0;</code></p>
-   </td>
-   <td>
-    <div class="hidden" id="transform_scale_without_origin">
-    <pre class="brush: html notranslate">
-&lt;div class="box7"&gt;&amp;nbsp;&lt;/div&gt;
-</pre>
 
-    <pre class="brush: css notranslate">
-.box7 {
-margin: 0.5em;
-width: 3em;
-height: 3em;
-border: solid 1px;
-background-color: palegreen;
-transform: scale(`1.7`);
--webkit-transform: scale(`1.7`);
-transform-origin: 0 0;
--webkit-transform-origin: 0 0;
+.box7  {
+  transform: scale(1.7);
+  transform-origin: 0 0;
 }
-</pre>
-    </div>
-
-    {{EmbedLiveSample('transform_scale_without_origin', '', 120, '', '', 'no-button') }}
-   </td>
-  </tr>
-  <tr>
-   <td>
-    <p><code>transform: scale(1.7);<br>
-     transform-origin: 100% -30%;</code></p>
-   </td>
-   <td>
-    <div class="hidden" id="transform_scale">
-    <pre class="brush: html notranslate">
-&lt;div class="box8"&gt;&amp;nbsp;&lt;/div&gt;
-</pre>
 
-    <pre class="brush: css notranslate">
 .box8 {
-margin: 0.5em;
-width: 3em;
-height: 3em;
-border: solid 1px;
-background-color: palegreen;
-transform: scale(`1.7`);
--webkit-transform: scale(`1.7`);
-transform-origin: 100% -30%;
--webkit-transform-origin: 100% -30%;
+  transform: scale(1.7);
+  transform-origin: 100% -30%;
 }
-</pre>
-    </div>
-
-    {{EmbedLiveSample('transform_scale', '', 120, '', '', 'no-button') }}
-   </td>
-  </tr>
-  <tr>
-   <td>
-    <p><code>transform: skewX(50deg);<br>
-     transform-origin: 100% -30%;</code></p>
-   </td>
-   <td>
-    <div class="hidden" id="transform_skew_x">
-    <pre class="brush: html notranslate">
-&lt;div class="box9"&gt;&amp;nbsp;&lt;/div&gt;
-</pre>
 
-    <pre class="brush: css notranslate">
 .box9 {
-margin: 0.5em;
-width: 3em;
-height: 3em;
-border: solid 1px;
-background-color: palegreen;
-transform: skewX(50deg);
--webkit-transform: skewX(50deg);
-transform-origin: 100% -30%;
--webkit-transform-origin: 100% -30%;
+  transform: skewX(50deg);
+  transform-origin: 100% -30%;
 }
-</pre>
-    </div>
-
-    {{EmbedLiveSample('transform_skew_x', '', 120, '', '', 'no-button') }}
-   </td>
-  </tr>
-  <tr>
-   <td>
-    <p><code>transform: skewY(50deg);<br>
-     transform-origin: 100% -30%;</code></p>
-   </td>
-   <td>
-    <div class="hidden" id="transform_skew_y">
-    <pre class="brush: html notranslate">
-&lt;div class="box10"&gt;&amp;nbsp;&lt;/div&gt;
-</pre>
 
-    <pre class="brush: css notranslate">
 .box10 {
-margin: 0.5em;
-width: 3em;
-height: 3em;
-border: solid 1px;
-background-color: palegreen;
-transform: skewY(50deg);
--webkit-transform: skewY(50deg);
-transform-origin: 100% -30%;
--webkit-transform-origin: 100% -30%;
+  transform: skewY(50deg);
+  transform-origin: 100% -30%;
 }
-</pre>
-    </div>
-
-    {{EmbedLiveSample('transform_skew_y', '', 120, '', '', 'no-button') }}
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }}</td>
-   <td>{{ Spec2('CSS3 Transforms') }}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-{{Compat("css.properties.transform-origin")}}
+```
+
+{{EmbedLiveSample('A_demonstration_of_various_transform_values', '', 1350) }}
+
+## ブラウザーの互換性
+
+{{Compat}}
 
 ## 関連情報
 
-<ul>
- <li>[CSS 変形の使用](/ja/docs/Web/CSS/Using_CSS_transforms)</li>
- <li>[https://css-tricks.com/almanac/properties/t/transform-origin/](https://css-tricks.com/almanac/properties/t/transform-origin/)</li>
-</ul>
+- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
+- <https://css-tricks.com/almanac/properties/t/transform-origin/>
diff --git a/files/ja/web/css/transform-style/index.md b/files/ja/web/css/transform-style/index.md
index 0794591d5f..f9bf92eaba 100644
--- a/files/ja/web/css/transform-style/index.md
+++ b/files/ja/web/css/transform-style/index.md
@@ -3,79 +3,83 @@ title: transform-style
 slug: Web/CSS/transform-style
 tags:
   - CSS
-  - CSS Property
-  - CSS Transforms
-  - Experimental
+  - CSS プロパティ
+  - CSS 座標変換
+  - 実験的
   - Reference
-  - 'recipe:css-property'
+  - recipe:css-property
+browser-compat: css.properties.transform-style
 translation_of: Web/CSS/transform-style
 ---
 {{CSSRef}}
 
-<span class="seoSummary">**`transform-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。</span>
+**`transform-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。
 
 {{EmbedInteractiveExample("pages/css/transform-style.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 [https://github.com/mdn/interactive-examples](https://github.com/mdn/interactive-examples) をクローンしてプルリクエストを送信してください。</p>
-
 平面化した場合、子要素は自身の 3D 空間に存在しなくなります。
 
 このプロパティは継承されないため、葉要素以外のすべての子孫要素で設定する必要があります。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+```css
+/* キーワード値 */
 transform-style: flat;
 transform-style: preserve-3d;
 
 /* グローバル値 */
 transform-style: inherit;
 transform-style: initial;
+transform-style: revert;
 transform-style: unset;
-</pre>
+```
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
 - `flat`
   - : 要素の子要素を要素自身の平面上に配置することを示します。
 - `preserve-3d`
   - : 要素の子要素を 3D 空間に配置することを示します。
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
 {{CSSInfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Transform_style_demonstration" name="Transform_style_demonstration">変換スタイルのデモ</h3>
+<h3 id="Transform_style_demonstration">座標変換スタイルのデモ</h3>
 
-この例では、変換を使用して 3D の立方体を作成しています。立方体の面の親コンテナーには、既定で `transform-style: preserve-3d` が設定されているため、3D 空間で変換され、意図したとおりに表示されます。
+この例では、座標変換を使用して 3D の立方体を作成しています。立方体の面の親コンテナーには、既定で `transform-style: preserve-3d` が設定されているため、3D 空間で座標変換され、意図したとおりに表示されます。
 
-また、これと `transform-style: flat` の間で切り替えられるチェックボックスも用意されています。この別な状態では、立方体の面はすべて親の平面上に平坦化され、使用しているブラウザーによっては全く表示されない場合があります。
+また、これと `transform-style: flat` の間で切り替えられるチェックボックスも用意しました。この別な状態では、立方体の面はすべて親の平面上に平坦化され、使用しているブラウザーによっては全く表示されない場合があります。
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;section id="example-element"&gt;
-  &lt;div class="face front"&gt;1&lt;/div&gt;
-  &lt;div class="face back"&gt;2&lt;/div&gt;
-  &lt;div class="face right"&gt;3&lt;/div&gt;
-  &lt;div class="face left"&gt;4&lt;/div&gt;
-  &lt;div class="face top"&gt;5&lt;/div&gt;
-  &lt;div class="face bottom"&gt;6&lt;/div&gt;
-&lt;/section&gt;
+```html
+<section id="example-element">
+  <div class="face front">1</div>
+  <div class="face back">2</div>
+  <div class="face right">3</div>
+  <div class="face left">4</div>
+  <div class="face top">5</div>
+  <div class="face bottom">6</div>
+</section>
 
-&lt;div class="checkbox"&gt;
-  &lt;label for="preserve"&gt;&lt;code&gt;preserve-3d&lt;/code&gt;&lt;/label&gt;
-  &lt;input type="checkbox" id="preserve" checked&gt;
-&lt;/div&gt;</pre>
+<div class="checkbox">
+  <label for="preserve"><code>preserve-3d</code></label>
+  <input type="checkbox" id="preserve" checked>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css notranslate">#example-element {
+```css
+#example-element {
   margin: 50px;
   width: 100px;
   height: 100px;
@@ -123,50 +127,36 @@ transform-style: unset;
 .bottom {
   background: rgba(210,0,210,.7);
   transform: rotateX(-90deg) translateZ(50px);
-}</pre>
+}
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js notranslate">const cube = document.getElementById('example-element');
+```js
+const cube = document.getElementById('example-element');
 const checkbox = document.getElementById('preserve');
 
-checkbox.addEventListener('change', () =&gt; {
+checkbox.addEventListener('change', () => {
   if(checkbox.checked) {
     cube.style.transformStyle = 'preserve-3d';
   } else {
     cube.style.transformStyle = 'flat';
   }
-})</pre>
+})
+```
 
-<h4 id="Result" name="Result">結果</h4>
+#### 結果
 
 {{EmbedLiveSample('Transform_style_demonstration', '100%', 260)}}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Transforms 2', '#transform-style-property', 'transform-style')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-{{Compat("css.properties.transform-style")}}
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
 
 ## 関連情報
 
-<ul>
- <li>[CSS 変形の使用](/ja/docs/CSS/Using_CSS_transforms)</li>
-</ul>
+- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
diff --git a/files/ja/web/css/transform/index.md b/files/ja/web/css/transform/index.md
index e5e505a742..cd519224bb 100644
--- a/files/ja/web/css/transform/index.md
+++ b/files/ja/web/css/transform/index.md
@@ -4,27 +4,26 @@ slug: Web/CSS/transform
 tags:
   - CSS
   - CSS プロパティ
-  - CSS 変形
   - Reference
+  - 座標変換
+  - recipe:css-property
+browser-compat: css.properties.transform
 translation_of: Web/CSS/transform
 ---
 {{CSSRef}}
 
-[CSS](/ja/docs/Web/CSS) のプロパティ **`transform`** は、与えられた要素を回転、拡大縮小、傾斜、移動することできます。これは、 CSS の[視覚整形モデル](/ja/docs/Web/CSS/Visual_formatting_model)の座標空間を変更します。
+**`transform`** は [CSS](/ja/docs/Web/CSS) のプロパティで、与えられた要素を回転、拡大縮小、傾斜、移動することできます。これは、 CSS の[視覚整形モデル](/ja/docs/Web/CSS/Visual_formatting_model)の座標空間を変更します。
 
 {{EmbedInteractiveExample("pages/css/transform.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 [https://github.com/mdn/interactive-examples](https://github.com/mdn/interactive-examples) をクローンしてプルリクエストを送信してください。</p>
+このプロパティに `none` 以外の値が設定されていると、[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)が作成されます。この場合、その要素はその中に含まれる `position: fixed;` または `position: absolute;` であるすべての要素の[包含ブロック](/ja/docs/Web/CSS/Containing_block)として扱われます。
 
-このプロパティに `none` 以外の値が設定されていると、[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) が作成されます。この場合、その要素はその中に含まれる `position: fixed;` または `position: absolute;` である要素すべての[包含ブロック](/ja/docs/Web/CSS/Containing_block)として扱われます。
+> **Warning:** 座標変換可能な要素のみが `transform` の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、[置換要素でないインラインボックス](/ja/docs/Web/CSS/Visual_formatting_model#inline-level_elements_and_inline_boxes)、[表の列ボックス](/ja/docs/Web/HTML/Element/col)、[表の列グループボックス](/ja/docs/Web/HTML/Element/colgroup)を除くすべての要素です。
 
-<div class="warning">
-変形可能な要素のみが `transform` の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、[非置換インラインボックス](/ja/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes)、[表の列ボックス](/ja/docs/Web/HTML/Element/col)、[表の列グループボックス](/ja/docs/Web/HTML/Element/colgroup)を除くすべての要素です。
-</div>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css">/* キーワード値 */
+```css
+/* キーワード値 */
 transform: none;
 
 /* 関数値 */
@@ -57,92 +56,79 @@ transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
 /* グローバル値 */
 transform: inherit;
 transform: initial;
+transform: revert;
 transform: unset;
-</pre>
+```
+
+`transform` プロパティには、キーワード値 `none` か 1 つ以上の `<transform-function>` の値のいずれかが指定されます。
 
-`transform` プロパティには、キーワード値 `[none](#none)` か `[&lt;transform-function&gt;](#&lt;transform-function>)` の値のいずれかが指定されます。
+複数の関数値に {{cssxref("transform-function/perspective()", "perspective()")}} が含まれる場合は、先頭に置く必要があります。
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
- <dt id="&lt;transform-function>">{{cssxref("&lt;transform-function&gt;")}}</dt>
-  - : 適用される 1 つ以上の [CSS 変形関数](/ja/docs/Web/CSS/transform-function)です。変形関数は、左から右へ順に重ねられ、つまり右から左の順に変形の混合の効果が適用されます。
- <dt id="none">`none`</dt>
-  - : 変形を何も適用しないことを指定します。
+- {{cssxref("&lt;transform-function&gt;")}}
+  - : 適用される 1 つ以上の [CSS 座標変換関数](/ja/docs/Web/CSS/transform-function)です。座標変換関数は、左から右へ順に重ねられ、つまり右から左の順に座標変換の合成の効果が適用されます。
+- `none`
+  - : 座標変換を何も適用しないことを指定します。
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## アクセシビリティの考慮
+
+拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。
+
+また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して[メディアクエリー](/ja/docs/Web/CSS/Media_queries)を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。
+
+詳しくは以下の文書を参照してください。
+
+- [MDN WCAG の理解、ガイドライン 2.3 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions)
+- [Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions)
+
+## 公式定義
+
+{{CSSInfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-{{cssxref("transform-function/perspective", "perspective()")}} を複数の関数の中で使用する場合は、最初に配置しなければなりません。
+## 例
 
-<h2 id="Examples" name="Examples">例</h2>
+<h3 id="Translating_and_rotating_an_element">要素の移動と回転</h3>
 
-<h3 id="HTML">HTML</h3>
+#### HTML
 
-<pre class="brush: html">&lt;div&gt;Transformed element&lt;/div&gt;</pre>
+```html
+<div>Transformed element</div>
+```
 
-<h3 id="CSS">CSS</h3>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   border: solid red;
   transform: translate(30px, 20px) rotate(20deg);
   width: 140px;
   height: 60px;
-}</pre>
+}
+```
 
-<h3 id="Result" name="Result">結果</h3>
+#### 結果
 
-{{EmbedLiveSample("Examples", "400", "160")}}
+{{EmbedLiveSample("Translating_and_rotating_an_element", "400", "160")}}
 
-その他の例は、[CSS Transforms の利用](/ja/docs/Web/Guide/CSS/Using_CSS_transforms) および {{cssxref("&lt;transform-function&gt;")}} をご覧ください。
+### その他の例
 
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+その他の例は、[CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)および {{cssxref("&lt;transform-function&gt;")}} をご覧ください。
 
-拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。
+## 仕様書
 
-また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して[メディアクエリ](/ja/docs/Web/CSS/Media_Queries)を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。
+{{Specifications}}
 
-詳しくは以下の文書を参照してください。
+## ブラウザーの互換性
 
-<ul>
- <li>[MDN WCAG の理解、ガイドライン 2.3 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions)</li>
- <li>[Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions)</li>
-</ul>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>3D 変換関数を追加。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
-   <td>{{Spec2('CSS3 Transforms')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-{{cssinfo}}
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-{{Compat("css.properties.transform")}}
+{{Compat}}
 
 ## 関連情報
 
-<ul>
- <li>[CSS 変形の使用](/ja/docs/Web/CSS/Using_CSS_transforms)</li>
- <li>{{cssxref("&lt;transform-function&gt;")}} データ型にすべての変形関数の説明があります</li>
- <li>CSS 変形機能を視覚化するオンラインツール: [CSS Transform Playground](https://css-transform.moro.es/)</li>
-</ul>
+- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
+- {{cssxref("&lt;transform-function&gt;")}} データ型にすべての座標変換関数の説明があります
+- CSS 座標変換機能を視覚化するオンラインツール: [CSS Transform Playground](https://css-transform.moro.es/)
diff --git a/files/ja/web/css/translate/index.md b/files/ja/web/css/translate/index.md
index 175107e62c..bea674339d 100644
--- a/files/ja/web/css/translate/index.md
+++ b/files/ja/web/css/translate/index.md
@@ -3,20 +3,21 @@ title: translate
 slug: Web/CSS/translate
 tags:
   - CSS
-  - CSS Property
-  - CSS 変形
-  - Experimental
+  - CSS プロパティ
   - Reference
-  - Transforms
+  - 座標変換
+  - recipe:css-property
+browser-compat: css.properties.translate
 translation_of: Web/CSS/translate
 ---
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
 
-**`translate`** は [CSS](/ja/docs/Web/CSS) のプロパティで、平行移動による変形を独自に、 {{CSSxRef("transform")}} プロパティから独立して指定することができます。これは一般的なユーザーインターフェイスの用途に適しており、 `transform` の値で指定する変形関数を正確に思い出す必要がなくなります。
+**`translate`** は [CSS](/ja/docs/Web/CSS) のプロパティで、平行移動の座標変換を独自に、 {{CSSxRef("transform")}} プロパティから独立して指定することができます。これは一般的なユーザーインターフェイスの用途に適しており、 `transform` の値で指定する変換関数を正確に思い出す必要がなくなります。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: css no-line-numbers">/* キーワード値 */
+```css
+/* キーワード値 */
 translate: none;
 
 /* 単一の値 */
@@ -29,9 +30,15 @@ translate: 50% 105px;
 
 /* 三つの値 */
 translate: 50% 105px 5rem;
-</pre>
 
-<h3 id="Values" name="Values">値</h3>
+/* グローバル値 */
+translate: inherit;
+translate: initial;
+translate: revert;
+translate: unset;
+```
+
+### 値
 
 - 単一の {{cssxref("&lt;length-percentage&gt;")}} 値
   - : 単一の {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} 値で、 X 軸および Y 軸方向が同じ移動量の二次元の平行移動を指定します。 `translate()` (二次元の平行移動) 関数に単一の値を指定したものと同等です。
@@ -39,24 +46,31 @@ translate: 50% 105px 5rem;
   - : 二つの {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} 値で、二次元の平行移動における X および Y 軸方向の移動量を (それぞれ) 指定します。 `translate()` (二次元の平行移動) 関数に二つの値を指定したものと同等です。
 - 三つの値
   - : 二つの {{cssxref("&lt;length-percentage&gt;")}} 値と一つの {{cssxref("&lt;length&gt;")}} 値で、三次元の平行移動における X, Y, Z 軸の移動量を (それぞれ) 指定します。 `translate3d()` (三次元の平行移動) 関数と同等です。
- <dt id="none">`none`</dt>
+- `none`
   - : 平行移動が適用されないことを指定します。
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 公式定義
+
+{{CSSInfo}}
+
+## 形式文法
 
 {{CSSSyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="translate"&gt;Translation&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div>
+  <p class="translate">Translation</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">* {
+```css
+* {
   box-sizing: border-box;
 }
 
@@ -85,33 +99,24 @@ p {
 div:hover .translate {
   translate: 200px 50px;
 }
-</pre>
+```
 
-<h3 id="Result" name="Result">結果</h3>
+### 結果
 
 {{EmbedLiveSample('Examples')}}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+## 仕様書
 
-{{CSSInfo}}
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+- {{cssxref('scale')}}
+- {{cssxref('rotate')}}
+- {{cssxref('transform')}}
 
-{{Compat("css.properties.translate")}}
+メモ: `skew` には独立した `transform` の値はありません