From 3c18a8fbac3cbd3c3ff0d9719292131c8bd3c8cb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 21 Nov 2021 22:56:20 +0900 Subject: transform-function の座標変換関数を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/transform-function/matrix3d()/index.html | 240 --------------------- 1 file changed, 240 deletions(-) delete mode 100644 files/ja/web/css/transform-function/matrix3d()/index.html (limited to 'files/ja/web/css/transform-function/matrix3d()/index.html') 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() ---- -
{{CSSRef}}
- -

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

- -

構文

- -

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

- -
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 で受け付けていました。
- - - - - - - - - - - - - - - - - -
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
この変換は三次元空間に適用され、平面で表現することはできません。一般的な三次元アファイン変換は、変換が線形変換ではないので、デカルト座標行列を使用して表現することはできません。a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4
- -

例

- -

つぶれる立方体の例

- -

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

- -

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>
-
- -

CSS

- -
#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);
-}
- -

結果

- -
{{EmbedLiveSample('Cube_squashing_example', '100%', '300px')}}
- -

行列変換と拡大縮小の例

- -

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

- -

HTML

- -
<div class="foo">
-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

- -
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
-    )
-  }
-}
- -

結果

- -
{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}}
- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - -- cgit v1.2.3-54-g00ecf