From 518b975d0f87c6c80a76a5d3e04f48ae7afbd126 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 21 Nov 2021 22:36:51 +0900 Subject: transform-function トップページを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/08/13 時点の英語版に同期 --- files/ja/web/css/transform-function/index.md | 369 ++++++++++++--------------- 1 file changed, 170 insertions(+), 199 deletions(-) diff --git a/files/ja/web/css/transform-function/index.md b/files/ja/web/css/transform-function/index.md index fa7f4a50ca..39c5e0ed70 100644 --- a/files/ja/web/css/transform-function/index.md +++ b/files/ja/web/css/transform-function/index.md @@ -3,179 +3,169 @@ title: slug: Web/CSS/transform-function tags: - CSS - - CSS Data Type - - CSS Transforms - - Data Type - - Layout - - Reference + - CSS データ型 + - CSS 座標変換 + - データ型 + - レイアウト + - リファレンス +browser-compat: css.types.transform-function translation_of: Web/CSS/transform-function --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の <transform-function> データ型は、要素の外見の変形を表します。変換関数は二次元または三次元空間で要素を回転、拡大縮小、歪曲、移動させることができます。これは {{cssxref("transform")}} プロパティの中で使用されます。

+**``** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、要素の外見に影響する座標変換を表します。座標変換[関数](/ja/docs/Web/CSS/CSS_Functions)は、二次元または三次元空間で要素を回転、拡大縮小、歪曲、移動させることができます。これは {{cssxref("transform")}} プロパティの中で使用されます。 -

構文

+## 構文 -

<transform-function> データ型は、以下に示した変換関数のうちの一つを使用して指定します。各関数は二次元または三次元の座標操作を適用します。

+`` データ型は、以下に示した変換関数のうちの一つを使用して指定します。各関数は二次元または三次元の座標操作を適用します。 -

行列変換

+### 行列変換 -
-
matrix()
-
二次元の同次変換行列を記述します。
-
matrix3d()
-
三次元の変換を4×4の同次行列で記述します。
-
+- [`matrix()`]() + - : 二次元の同次変換行列を記述します。 +- [`matrix3d()`]() + - : 三次元の変換を4×4の同次行列で記述します。

視点距離

-
-
perspective()
-
ユーザーと z=0 平面との間の距離を設定します。
-
+- [`perspective()`]() + - : ユーザーと z=0 平面との間の距離を設定します。

回転

-
-
rotate()
-
要素を二次元平面上で特定の点を中心に回転します。
-
rotate3d()
-
要素を三次元空間で特定の軸を中心に回転します。
-
rotateX()
-
要素を水平軸を中心に回転します。
-
rotateY()
-
要素を垂直軸を中心に回転します。
-
rotateZ()
-
要素を Z 軸を中心に回転します。
-
+- [`rotate()`]() + - : 要素を二次元平面上で特定の点を中心に回転します。 +- [`rotate3d()`]() + - : 要素を三次元空間で特定の軸を中心に回転します。 +- [`rotateX()`]() + - : 要素を水平軸を中心に回転します。 +- [`rotateY()`]() + - : 要素を垂直軸を中心に回転します。 +- [`rotateZ()`]() + - : 要素を Z 軸を中心に回転します。 -

拡大縮小

+### 拡大縮小 -
-
scale()
-
要素を二次元平面上で拡大または縮小します。
-
scale3d()
-
要素を三次元空間で拡大または縮小します。
-
scaleX()
-
要素を水平に拡大または縮小します。
-
scaleY()
-
要素を垂直に拡大または縮小します。
-
scaleZ()
-
要素を Z 軸方向に拡大または縮小します。
-
- -

歪め

- -
-
skew()
-
要素を二次元平面上で歪ませます。
-
skewX()
-
要素を水平方向に歪ませます。
-
skewY()
-
要素を垂直方向に歪ませます。
-
- -

平行移動

- -
-
translate()
-
要素を二次元平面上で平行移動させます。
-
translate3d()
-
要素を三次元空間で平行移動させます。
-
translateX()
-
要素を水平方向に平行移動させます。
-
translateY()
-
要素を垂直方向に平行移動させます。
-
translateZ()
-
要素を Z 軸方向に平行移動させます。
-
- -

解説

- -

HTML 要素の寸法や形状を記述するために様々な座標モデルが用いられることがあり、同様に変換にも適用されます。最も一般的なものは、直交座標系ですが、同次座標系が用いられることもあります。

- -

直交座標系

- -

- -

直交座標系では、二次元の点は、 X 座標 (横座標) と Y 座標 (縦座標) の二つの値を使用して記述します。これは (x, y) のベクトル表記で表現されます。

- -

CSS (および多くのコンピューターグラフィック) では、原点 (0, 0) が各要素の左上を表します。正の座標は原点から下および右に向かい、負の座標は上および左に向かいます。従って、右に2単位、下に5単位では (2, 5) となり、左に3単位、上に12単位では (-3, -12) となります。

- -

変換関数

- -

変換関数は、座標の値を操作することによって要素の外見を変更します。線形変換関数は、次のように2×2の行列で記述されます。

- -

ac bd

- -

関数は行列の乗算によって要素に適用されます。つまり、それぞれの座標は行列の値に基づいて変化します。

- -

ac bd xy = ax+cy bx+dy

- -

一行の中に複数の変換を適用することもできます。

- -

a1 c1 b1 d1 a2 c2 b2 d2 = a1 a2 + c1 b2 a1 c2 + c1 d2 b1 a2 + d1 b2 b1 c2 + d1 d2

- -

この記法で、最もよく使われる回転、拡大縮小、傾斜の変換を記述し、合成することができます。 (実際、すべての変換が記述できる線形関数です。) 変換の合成は右から左の順に効果的に適用されます。

- -

しかし、主要な変換のうち平行移動は線形ではなく、従ってこの記法を使用する場合は特例とする必要があります。平行移動のベクトル (tx, ty) は、二つの追加の引数で別に表現しなければなりません。

- -
-

注: 直交座標よりも難解ですが、射影幾何学の同次座標は3×3の変換行列を使用するので、線形関数として平行移動をより簡単に表現できます。

-
- -

例

- -

変換関数の比較

- -

次の例では、 DOM 要素と変換から作成された 3D 立方体と、立方体を変換するためのさまざまな変換関数を選択できる選択メニューを提供しています。

- -

1 つを選択すると、立方体に変換が適用されます。 2 秒後に立方体は開始状態に戻ります。立方体の開始状態は、 transform3d() を使用してわずかに回転され、すべての変換の効果を見ることができます。

- -

HTML

- -
<main>
-  <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>
-
-  <div class="select-form">
-    <label>Select a transform function</label>
-    <select>
-      <option selected>Choose a function</option>
-      <option>rotate(360deg)</option>
-      <option>rotateX(360deg)</option>
-      <option>rotateY(360deg)</option>
-      <option>rotateZ(360deg)</option>
-      <option>rotate3d(1, 1, 1, 90deg)</option>
-      <option>scale(1.5)</option>
-      <option>scaleX(1.5)</option>
-      <option>scaleY(1.5)</option>
-      <option>scaleZ(1.5)</option>
-      <option>scale3d(1, 1.5, 1.5)</option>
-      <option>skew(17deg, 13deg)</option>
-      <option>skewX(17deg)</option>
-      <option>skewY(17deg)</option>
-      <option>translate(100px, 100px)</option>
-      <option>translateX(100px)</option>
-      <option>translateY(100px)</option>
-      <option>translateZ(100px)</option>
-      <option>translate3d(50px, 50px, 50px)</option>
-      <option>perspective(200px)</option>
-      <option>matrix(1, 2, -1, 1, 80, 80)</option>
-      <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option>
-    </select>
-  </div>
-</main>
+- [`scale()`]() + - : 要素を二次元平面上で拡大または縮小します。 +- [`scale3d()`]() + - : 要素を三次元空間で拡大または縮小します。 +- [`scaleX()`]() + - : 要素を水平に拡大または縮小します。 +- [`scaleY()`]() + - : 要素を垂直に拡大または縮小します。 +- [`scaleZ()`]() + - : 要素を Z 軸方向に拡大または縮小します。 + +### 歪め + +- [`skew()`]() + - : 要素を二次元平面上で歪ませます。 +- [`skewX()`]() + - : 要素を水平方向に歪ませます。 +- [`skewY()`]() + - : 要素を垂直方向に歪ませます。 + +### 平行移動 + +- [`translate()`]() + - : 要素を二次元平面上で平行移動させます。 +- [`translate3d()`]() + - : 要素を三次元空間で平行移動させます。 +- [`translateX()`]() + - : 要素を水平方向に平行移動させます。 +- [`translateY()`]() + - : 要素を垂直方向に平行移動させます。 +- [`translateZ()`]() + - : 要素を Z 軸方向に平行移動させます。 + +## 解説 + +HTML 要素の寸法や形状を記述するために様々な座標モデルが用いられることがあり、同様に変換にも適用されます。最も一般的なものは、[直交座標系](https://ja.wikipedia.org/wiki/%E7%9B%B4%E4%BA%A4%E5%BA%A7%E6%A8%99%E7%B3%BB)ですが、[同次座標系](https://en.wikipedia.org/wiki/Homogeneous_coordinates)が用いられることもあります。 + +### 直交座標系 + +直交座標系では、二次元の点は、 X 座標 (横座標) と Y 座標 (縦座標) の二つの値を使用して記述します。これは `(x, y)` のベクトル表記で表現されます。 + +![](coord_in_r2.png) + +CSS (および多くのコンピューターグラフィック) では、原点 `(0, 0)` が各要素の*左上*を表します。正の座標は原点から下および右に向かい、負の座標は上および左に向かいます。従って、右に 2 単位、下に 5 単位では `(2, 5)` となり、左に 3 単位、上に 12 単位では `(-3, -12)` となります。 + +### 座標変換関数 + +座標変換関数は、座標の値を操作することによって要素の外見を変更します。線形座標変換関数は、次のように　2×2の　　行列で記述されます。 + +ac bd + +関数は行列の乗算によって要素に適用されます。つまり、それぞれの座標は行列の値に基づいて変化します。 + +ac bd xy = ax+cy bx+dy + +一行の中で複数の座標変換を適用することもできます。 + +a1 c1 b1 d1 a2 c2 b2 d2 = a1 a2 + c1 b2 a1 c2 + c1 d2 b1 a2 + d1 b2 b1 c2 + d1 d2 + +この記法で、最もよく使われる回転、拡大縮小、傾斜の座標変換を記述し、合成することができます。 (実際、すべての座標変換が記述できる線形関数です。) 座標変換の合成は右から左の順に効果的に適用されます。 + +しかし、主要な座標変換のうち平行移動は線形ではなく、従ってこの記法を使用する場合は特例とする必要があります。平行移動のベクトル `(tx, ty)` は、二つの追加の引数で別に表現しなければなりません。 + +> **Note:** 直交座標よりも難解ですが、[射影幾何学](https://ja.wikipedia.org/wiki/%E5%B0%84%E5%BD%B1%E5%B9%BE%E4%BD%95%E5%AD%A6)の[同次座標](https://en.wikipedia.org/wiki/Homogeneous_coordinates)は 3 × 3 の変換行列を使用するので、線形関数として平行移動をより簡単に表現できます。 + +## 例 + +

変換関数の比較

+ +次の例では、DOM 要素と座標変換で作成された 3D 立方体と、立方体を座標変換するための異なる座標変換関数を選択するための選択メニューが用意されており、異なる種類の効果を比較することができます。 + +選択すると、変換が立方体に適用され、2 秒後に立方体は開始時の状態に戻ります。すべての変換の効果を見ることができるように、`transform3d()` を使って立方体の開始状態をわずかに回転させています。 + +#### HTML + +```html +
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+ +
+ + +
+
+``` -

CSS

+#### CSS -
main {
+```css
+main {
   width: 400px;
   height: 200px;
   padding: 50px;
@@ -234,14 +224,16 @@ translation_of: Web/CSS/transform-function
 
 .select-form {
   margin-top: 50px;
-}
+} +``` -

JavaScript

+#### JavaScript -
const selectElem = document.querySelector('select');
+```js
+const selectElem = document.querySelector('select');
 const example = document.querySelector('#example-element');
 
-selectElem.addEventListener('change', () => {
+selectElem.addEventListener('change', () => {
   if(selectElem.value === 'Choose a function') {
     return;
   } else {
@@ -250,42 +242,21 @@ selectElem.addEventListener('change', () => {
       example.style.transform = 'rotate3d(1, 1, 1, 30deg)';
     }, 2000)
   }
-})
- -

結果

- -

{{EmbedLiveSample('Transform_function_comparison', '100%', 300)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Transforms 2', '#transform-functions', '<transform-function>')}}{{Spec2('CSS Transforms 2')}}三次元変換関数を追加。
{{SpecName('CSS3 Transforms', '#transform-functions', '<transform-function>')}}{{Spec2('CSS3 Transforms')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.types.transform-function")}}

- -

関連情報

- -
    -
  • CSS の {{cssxref("transform")}} プロパティ
    • -
+}) +``` + +#### 結果 + +{{EmbedLiveSample('Transform_function_comparison', '100%', 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- CSS の {{cssxref("transform")}} プロパティ -- cgit v1.2.3-54-g00ecf