Web/CSS/transform-box を更新

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

2 files changed, 119 insertions, 88 deletions

diff --git a/files/ja/web/css/transform-box/index.html b/files/ja/web/css/transform-box/index.html
deleted file mode 100644
index ef15625684..0000000000
--- a/files/ja/web/css/transform-box/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: transform-box
-slug: Web/CSS/transform-box
-tags:
-  - CSS
-  - CSS Property
-  - CSS Transforms
-  - CSS プロパティ
-  - CSS 変形
-  - Experimental
-  - NeedsBrowserCompatibility
-  - NeedsExample
-  - Reference
-translation_of: Web/CSS/transform-box
----
-<div>{{CSSRef}}</div>
-
-<p><strong><code>transform-box</code></strong> プロパティは、 {{cssxref("transform")}} と {{cssxref("transform-origin")}} プロパティに関連したレイアウトボックスを定義します。</p>
-
-<pre class="brush:css no-line-numbers">/* キーワード値 */
-transform-box: content-box;
-transform-box: border-box;
-transform-box: fill-box;
-transform-box: stroke-box;
-transform-box: view-box;
-
-/* グローバル値 */
-transform-box: inherit;
-transform-box: initial;
-transform-box: unset;
-</pre>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<p><code>transform-box</code> プロパティは、以下のキーワードの 1 つで指定されます。</p>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><code>content-box</code></dt>
- <dd>
- <p>コンテンツボックスを参照ボックスとして使用します。 {{htmlElement("table")}} の参照ボックスは、テーブルボックスではなく、安定ラッパーボックスの境界ボックスになります。</p>
- </dd>
- <dt><code>border-box</code></dt>
- <dd>参照ボックスとして、境界ボックスが使用されます。テーブルの参照ボックスはテーブルボックスではなく、テーブルをラップしているボックスの境界ボックスとなります。</dd>
- <dt><code>fill-box</code></dt>
- <dd>参照ボックスとしてバウンディングボックスが使用されます。</dd>
- <dt><code>stroke-box</code></dt>
- <dd>ストロークのバウンディングボックスを基準ボックスとしています。</dd>
- <dt><code>view-box</code></dt>
- <dd>参照ボックスとして、直近の {{Glossary("SVG")}} を使用します。SVG ビューポートに {{SVGAttr("viewBox")}} 属性が指定されていた場合、参照ボックスは <code>viewBox</code> 属性によって設定された座標系の原点に配置されます。また、参照ボックスの寸法は <code>viewBox</code> 属性の幅と高さの値に設定されています。</dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
-
-{{csssyntax}}
-
-<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-box', 'transform-box')}}</td>
-   <td>{{Spec2('CSS3 Transforms')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.transform-box")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/CSS/Using_CSS_transforms">CSS 変形の利用</a></li>
- <li>{{cssxref("transform")}}, {{cssxref("transform-origin")}}</li>
-</ul>
diff --git a/files/ja/web/css/transform-box/index.md b/files/ja/web/css/transform-box/index.md
new file mode 100644
index 0000000000..3800f60f06
--- /dev/null
+++ b/files/ja/web/css/transform-box/index.md
@@ -0,0 +1,119 @@
+---
+title: transform-box
+slug: Web/CSS/transform-box
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS Transforms
+  - Experimental
+  - NeedsExample
+  - Reference
+  - recipe:css-property
+browser-compat: css.properties.transform-box
+translation_of: Web/CSS/transform-box
+---
+{{CSSRef}}
+
+CSS の **`transform-box`** プロパティは、 {{cssxref("transform")}} と {{cssxref("transform-origin")}} プロパティに関連したレイアウトボックスを定義します。
+
+```css
+/* キーワード値 */
+transform-box: content-box;
+transform-box: border-box;
+transform-box: fill-box;
+transform-box: stroke-box;
+transform-box: view-box;
+
+/* グローバル値 */
+transform-box: inherit;
+transform-box: initial;
+transform-box: revert;
+transform-box: unset;
+```
+
+## 構文
+
+`transform-box` プロパティは、以下のキーワードの 1 つで指定されます。
+
+### 値
+
+- `content-box`
+  - : コンテンツボックスを参照ボックスとして使用します。 {{htmlElement("table")}} の参照ボックスはテーブルのボックスではなく、テーブルを囲んでいるボックスの境界ボックスになります。
+- `border-box`
+  - : 境界ボックスを参照ボックスとして使用します。 {{htmlElement("table")}} の参照ボックスはテーブルのボックスではなく、テーブルを囲んでいるボックスの境界ボックスになります。
+- `fill-box`
+  - : そのオブジェクトのバウンディングボックスを参照ボックスとして使用します。
+- `stroke-box`
+  - : ストロークのバウンディングボックスを参照ボックスとして使用します。
+- `view-box`
+  - : 直近の {{Glossary("SVG")}} のビューポートを参照ボックスとして使用します。SVG ビューポートに {{SVGAttr("viewBox")}} 属性が指定されていた場合、参照ボックスは `viewBox` 属性によって設定された座標系の原点に配置されます。また、参照ボックスの寸法は `viewBox` 属性の幅と高さの値に設定されます。
+
+## 公式定義
+
+{{CSSInfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+### SVG の transform-origin のスコープ
+
+この例では、以下のような SVG があるとします。
+
+```html
+<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+  <g>
+    <circle id="center" fill="red" r="1" transform="translate(25 25)" />
+    <circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" />
+    <rect id="box" x="10" y="10" width="10" height="10" rx="1" ry="1" stroke="black" fill="none" />
+  </g>
+</svg>
+```
+
+この CSS では、変換を使用して矩形を無限に回転させるアニメーションを作成しています。 `transform-box: fill-box` を使用して、変換の原点をバウンディングボックスの中心にし、矩形が所定の位置で回転するようにします。 `fill-box` がない場合、変換の原点は SVG キャンバスの中心となるため、まったく異なる効果が得られます。
+
+```css
+svg{
+  width:80vh;
+  border:1px solid #d9d9d9;
+  position:absolute;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+#box{
+  transform-origin:50% 50%;
+  /*+++++++++++++++++++++++++++*/
+  /* if I remove this rule the pen won't work properly on Chrome for Mac, FF, Safari
+  Will still work properly on Chrome for PC & Opera*/
+  transform-box: fill-box;
+  /*Alternatively  I can use transform-origin:15px 15px;*/
+  /*+++++++++++++++++++++++++++*/
+  animation: rotateBox 3s linear infinite;
+}
+
+@keyframes rotateBox {
+  to {
+    transform: rotate(360deg);
+  }
+```
+
+この例は [Pogany](https://codepen.io/giaco) 氏によるものです。ライブ版は[この codepen](https://codepen.io/giaco/pen/OwowJQ) をご覧ください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS 変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
+- {{cssxref("transform")}}, {{cssxref("transform-origin")}}