transform-function の座標変換関数を変換準備

1 files changed, 0 insertions, 240 deletions

diff --git a/files/ja/web/css/transform-function/matrix3d()/index.html b/files/ja/web/css/transform-function/matrix3d()/index.html
deleted file mode 100644
index c34354f047..0000000000
--- a/files/ja/web/css/transform-function/matrix3d()/index.html
+++ /dev/null
@@ -1,240 +0,0 @@
----
-title: matrix3d()
-slug: Web/CSS/transform-function/matrix3d()
-tags:
-  - CSS
-  - CSS Function
-  - CSS Transforms
-  - Function
-  - Reference
-translation_of: Web/CSS/transform-function/matrix3d()
----
-<div>{{CSSRef}}</div>
-
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>matrix3d()</code></strong> 関数は、 4x4 の三次元同次変換行列を定義します。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<p><code>matrix3d()</code> 関数は16の値で指定します。列優先の順で記述します。</p>
-
-<pre class="syntaxbox notranslate">matrix3d(<var>a1</var>, <var>b1</var>, <var>c1</var>, <var>d1</var>, <var>a2</var>, <var>b2</var>, <var>c2</var>, <var>d2</var>, <var>a3</var>, <var>b3</var>, <var>c3</var>, <var>d3</var>, <var>a4</var>, <var>b4</var>, <var>c4</var>, <var>d4</var>)</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><var>a1</var> <var>b1</var> <var>c1</var> <var>d1</var> <var>a2</var> <var>b2</var> <var>c2</var> <var>d2</var> <var>a3</var> <var>b3</var> <var>c3</var> <var>d3</var></dt>
- <dd>{{cssxref("&lt;number&gt;")}} で、線形変換を記述します。</dd>
- <dt><var>a4</var> <var>b4</var> <var>c4 d4</var></dt>
- <dd>{{cssxref("&lt;number&gt;")}} で、適用する変換を記述します。</dd>
-</dl>
-
-<div class="note"><strong>注:</strong> Firefox 16 までは、 Gecko は {{cssxref("&lt;length&gt;")}} 値を <var>a4</var>, <var>b4</var>, <var>c4</var> で受け付けていました。</div>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
-   <th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
-   <th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
-   <th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="2" rowspan="2">この変換は三次元空間に適用され、平面で表現することはできません。</td>
-   <td colspan="1" rowspan="2">一般的な三次元<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 colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>a1</mtd><mtd>a2</mtd><mtd>a3</mtd><mtd>a4</mtd></mtr><mtr><mtd>b1</mtd><mtd>b2</mtd><mtd>b3</mtd><mtd>b4</mtd></mtr><mtr><mtd>c1</mtd><mtd>c2</mtd><mtd>c3</mtd><mtd>c4</mtd></mtr><mtr><mtd>d1</mtd><mtd>d2</mtd><mtd>d3</mtd><mtd>d4</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="つぶれる立方体の例">つぶれる立方体の例</h3>
-
-<p>次の例は、DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで <code>matrix3d()</code> 変換を適用することができます。</p>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html notranslate">&lt;section id="example-element" tabindex="0"&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;
-</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css notranslate">#example-element {
-  width: 100px;
-  height: 100px;
-  transform-style: preserve-3d;
-  transition: transform 1.5s;
-  transform: rotate3d(1, 1, 1, 30deg);
-  margin: 50px auto;
-}
-
-#example-element:hover, #example-element:focus {
-  transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1);
-}
-
-.face {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  backface-visibility: inherit;
-  font-size: 60px;
-  color: #fff;
-}
-
-.front {
-    background: rgba(90,90,90,.7);
-    transform: translateZ(50px);
-}
-
-.back {
-    background: rgba(0,210,0,.7);
-    transform: rotateY(180deg) translateZ(50px);
-}
-
-.right {
-  background: rgba(210,0,0,.7);
-  transform: rotateY(90deg) translateZ(50px);
-}
-
-.left {
-  background: rgba(0,0,210,.7);
-  transform: rotateY(-90deg) translateZ(50px);
-}
-
-.top {
-  background: rgba(210,210,0,.7);
-  transform: rotateX(90deg) translateZ(50px);
-}
-
-.bottom {
-  background: rgba(210,0,210,.7);
-  transform: rotateX(-90deg) translateZ(50px);
-}</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<div>{{EmbedLiveSample('Cube_squashing_example', '100%', '300px')}}</div>
-
-<h3 id="行列変換と拡大縮小の例">行列変換と拡大縮小の例</h3>
-
-<p>もう一つの <code>transform3d()</code> の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。</p>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html notranslate">&lt;div class="foo"&gt;
-Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere
-necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
-&lt;/div&gt;
-</pre>
-
-<h4 id="CSS_2">CSS</h4>
-
-<pre class="brush: css notranslate">html {
-  width: 100%;
-}
-body {
-  height: 100vh;
-  /* Centering content */
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-  align-content: center;
-
-}
-.foo {
-  width: 50%;
-  padding: 1em;
-  color: white;
-  background: #ff8c66;
-  border: 2px dashed black;
-  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%
-    */
-    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
-    );
-  }
-  to {
-     transform: matrix3d(
-      1,0,0,0,
-      0,1,0,0,
-      0,0,1,0,
-      50,100,0,1.1
-    )
-  }
-}</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<div>{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}}</div>
-
-<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", "#funcdef-matrix3d", "matrix3d()")}}</td>
-   <td>{{Spec2("CSS Transforms 2")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
- <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Understanding the CSS Transforms Matrix</a></li>
-</ul>