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

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

+**`matrix3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 4x4 の三次元同次変換行列を定義します。 +結果は {{cssxref("<transform-function>")}} データ型になります。 -

構文

+## 構文 -

matrix3d() 関数は16の値で指定します。列優先の順で記述します。

+`matrix3d()` 関数は 16 個の値で指定します。列優先の順で記述します。 -
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
+```css +matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) +``` -

値

+### 値 -
-
a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3
-
{{cssxref("<number>")}} で、線形変換を記述します。
-
a4 b4 c4 d4
-
{{cssxref("<number>")}} で、適用する変換を記述します。
-
- -
注: Firefox 16 までは、 Gecko は {{cssxref("<length>")}} 値を a4, b4, c4 で受け付けていました。
+- _a1_ _b1_ _c1_ _d1_ _a2_ _b2_ _c2_ _d2_ + _a3_ _b3_ _c3_ _d3_ + - : {{cssxref("<number>")}} で、線形変換を記述します。 +- _a4_ _b4_ _c4 d4_ + - : {{cssxref("<number>")}} で、適用する変換を記述します。 - - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
この変換は三次元空間に適用され、平面で表現することはできません。一般的な三次元アファイン変換は、変換が線形変換ではないので、デカルト座標行列を使用して表現することはできません。a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ この変換は三次元空間に適用され、平面で表現することはできません。 + + 一般的な三次元[アファイン変換](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%95%E3%82%A3%E3%83%B3%E5%86%99%E5%83%8F)は、変換が線形変換ではないので、デカルト座標行列を使用して表現することはできません。 + + a1 a2 a3 a4 b1 b2 b3 b4 c1 c2 c3 c4 d1 d2 d3 d4 +
-

例

+## 例 -

つぶれる立方体の例

+### つぶれる立方体の例 -

次の例は、DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで matrix3d() 変換を適用することができます。

+次の例は、DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで `matrix3d()` 変換を適用することができます。 -

HTML

+#### HTML -
<section id="example-element" tabindex="0">
-  <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>
-
+```html +
+ 
1
+ 
2
+ 
3
+ 
4
+ 
5
+ 
6
+
+``` -

CSS

+#### CSS -
#example-element {
+```css
+#example-element {
   width: 100px;
   height: 100px;
   transform-style: preserve-3d;
@@ -121,28 +148,31 @@ translation_of: Web/CSS/transform-function/matrix3d()
 .bottom {
   background: rgba(210,0,210,.7);
   transform: rotateX(-90deg) translateZ(50px);
-}
+} +``` -

結果

+#### 結果 -
{{EmbedLiveSample('Cube_squashing_example', '100%', '300px')}}
+{{EmbedLiveSample('Cube_squashing_example', '100%', '300px')}} -

行列変換と拡大縮小の例

+### 行列変換と拡大縮小の例 -

もう一つの transform3d() の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。

+もう一つの `transform3d()` の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。 -

HTML

+#### HTML -
<div class="foo">
+```html
+

 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?
-</div>
-
+ +``` -

CSS

+#### CSS -
html {
+```css
+html {
   width: 100%;
 }
 body {
@@ -202,39 +232,23 @@ body {
       50,100,0,1.1
     )
   }
-}
+} +``` -

結果

+#### 結果 -
{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}}
+{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}} -

仕様書

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

ブラウザーの互換性

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

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

+{{Compat}} -

関連情報

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