recursal/MDN huggingface dataset:
rotateY()
=========

**`rotateY()`** は CSS の関数で、要素の形を変化させずに縦座標 (垂直軸) の周りを回転させる座標変換を定義します。結果は `<transform-function>` データ型になります。

試してみましょう
--------

回転軸は、CSS の `transform-origin` プロパティで定義される原点を通ります。

**メモ:** `rotateY(a)` は `rotate3d(0, 1, 0, a)` と等価です。

**メモ:** 2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。

構文
--

`rotateY()` で生成される回転の量は、 `<angle>` で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。


```css
rotateY(a)
```

### 値

`a`

`<angle>` で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。



| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| この変換は 3D 空間に適用され、平面で表すことはできません。 | 

(

cos
(
a
)

0

sin
(
a
)

0

1

0

-
sin
(
a
)

0

cos
(
a
)

)

 | 

(

cos
(
a
)

0

sin
(
a
)

0

0

1

0

0

-
sin
(
a
)

0

cos
(
a
)

0

0

0

0

1

)

 |

例
-

### HTML


```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateY(60deg);
  background-color: pink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-rotatey |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `transform` プロパティ
* `rotate` プロパティ
* `<transform-function>`
skewX()
=======

**`skewX()`** は CSS の関数で、要素を 2D 平面上で水平方向にゆがめる変換を定義します。結果は `<transform-function>` データ型になります。

試してみましょう
--------

この変換はシアー変形 (せん断写像) で、要素内のそれぞれの点を水平方向に指定された角度でゆがませます。それぞれの点の横座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。

**メモ:** `skewX(a)` は `skew(a)` と等価です。

構文
--


```css
skewX(a)
```

### 値

`a`

`<angle>` で、横座標方向にゆがめるのに使用する角度を表します。



| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| 

(

1

tan
(
a
)

0

1

)

 | 

(

1

tan
(
a
)

0

0

1

0

0

0

1

)

 | 

(

1

tan
(
a
)

0

0

1

0

0

0

1

)

 | 

(

1

tan
(
a
)

0

0

0

1

0

0

0

0

1

0

0

0

0

1

)

 |
| `[1 0 tan(a) 1 0 0]` |

例
-

### HTML


```html
<div>Normal</div>
<div class="skewed">Skewed</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skewX(10deg); /\* skew(10deg) と同じ \*/
  background-color: pink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-skewx |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `transform`
* `<transform-function>`
* 独立した座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`
    + 注: `skew` プロパティはありません
perspective()
=============

**`perspective()`** は CSS の関数で、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。結果は `<transform-function>` データ型になります。

試してみましょう
--------

`perspective()` 座標変換関数は `transform` 値の一部で、座標変換される要素に適用されます。これは `perspective` および `perspective-origin` の各プロパティが三次元空間に座標変換される子の親に付けられるのとは異なります。

構文
--

`perspective()` で使用する視点距離は、`<length>` 値でユーザーと z=0 平面との間の距離を指定するか、または `none` で指定します。
 z=0 平面とは、二次元表示ですべてが見える平面、つまり画面のことです。
 負の値は構文エラーになります。
 `1px` より小さい値 (ゼロを含む) は `1px` になります。
 値が `none` 以外の場合、 z が正の位置にある要素は大きく表示されます。また、z が負の位置にある要素は小さく表示されます。
 z 位置が `perspective` の値と同じか大きい要素は、ユーザーの背後にあるかのようになり、非表示になります。
 `perspective()` が大きいと、座標変換が小さいことを表します。`perspective()` の値が小さいと、座標変換が大きいことを表します。`perspective(none)` は無限の距離からの遠近感を表し、座標変換はありません。


```css
perspective(d)
```

### 値

*d*

`<length>` で、ユーザーと z=0 平面との間の距離を表します。 0 または負の数であった場合は、距離の変換は適用されません。



| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| この変換は 3D 空間に適用され、平面で表現することはできません。 | この変換は ℝ^3 では線形変換ではないので、直交座標行列を使用して表現することはできません。 | 

(

1

0

0

0

0

1

0

0

0

0

1

0

0

0

−
1
/
d

1

)

 |

例
-

### HTML


```html
<p>Without perspective:</p>
<div class="no-perspective-box">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>With perspective (9cm):</p>
<div class="perspective-box-far">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>With perspective (4cm):</p>
<div class="perspective-box-closer">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>
```

### CSS


```css
.face {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 100px;
  text-align: center;
}

p + div {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  margin-left: 100px;
}
.no-perspective-box {
  transform: rotateX(-15deg) rotateY(30deg);
}

.perspective-box-far {
  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
}

.perspective-box-closer {
  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
}

.top {
  background-color: skyblue;
  transform: rotateX(90deg) translate3d(0, 0, 50px);
}

.left {
  background-color: pink;
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
}

.front {
  background-color: limegreen;
  transform: translate3d(0, 0, 50px);
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-perspective |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `transform`
* `<transform-function>`
* 独立の座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`
rotate()
========

**`rotate()`** は CSS の関数で、要素を二次元平面上の特定の点を中心に、形を崩さずに回転させる座標変換を定義します。結果は `<transform-function>` データ型になります。

試してみましょう
--------

要素が回転する中心となる特定の点 — 前述 — は、**変換原点**とも呼ばれます。既定では要素の中央ですが、 `transform-origin` プロパティを使用して独自の座標変換原点を設定することができます。

構文
--

`rotate()` で生成される回転の量は、 `<angle>` で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180 度で回転したものは*点対称*と呼ばれます。


```css
rotate(a)
```

### 値

*a*

`<angle>` で、回転する角度を表します。回転方向は書字方向に依存します。
 左書きの文脈では、正の角度は時計回りの回転を、負の角度は反時計回りの回転を表します。右書きの文脈では 正の角度は反時計回りの回転を、負の角度は時計回りの回転を表します。




| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| 

(

cos
(
a
)

-
sin
(
a
)

sin
(
a
)

cos
(
a
)

)

 | 

(

cos
(
a
)

-
sin
(
a
)

0

sin
(
a
)

cos
(
a
)

0

0

0

1

)

 | 

(

cos
(
a
)

-
sin
(
a
)

0

sin
(
a
)

cos
(
a
)

0

0

0

1

)

 | 

(

cos
(
a
)

-
sin
(
a
)

0

0

sin
(
a
)

cos
(
a
)

0

0

0

0

1

0

0

0

0

1

)

 |
| `[cos(a) sin(a) -sin(a) cos(a) 0 0]` |

例
-

### 基本的な例

#### HTML


```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```


#### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /\* rotateZ(45deg) と等価 \*/
  background-color: pink;
}
```


#### 結果

### 回転とその他の座標変換の組み合わせ

複数の座標変換を要素に適用したい場合は、座標変換を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。

#### HTML


```html
<div>Normal</div>
<div class="rotate">Rotated</div>
<div class="rotate-translate">Rotated + Translated</div>
<div class="translate-rotate">Translated + Rotated</div>
```


#### CSS


```css
div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-rotate |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `transform` プロパティ
* `rotate` プロパティ
* `<transform-function>`
* `rotate3d()`
matrix()
========

**`matrix()`** は CSS の関数で、二次元同次変換行列を定義します。結果は `<transform-function>` データ型になります。

試してみましょう
--------

**メモ:** `matrix(a, b, c, d, tx, ty)` は `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)` の短縮形です。

構文
--

`matrix()` 関数は 6 つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。


```css
matrix(a, b, c, d, tx, ty)
```

### 値

*a* *b* *c* *d*

`<number>` で、線形変換を記述します。

*tx* *ty*

`<number>` で、適用する変換を記述します。



| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| 

(

a

c

b

d

)

 | 

(

a

c

tx

b

d

ty

0

0

1

)

 | 

(

a

c

tx

b

d

ty

0

0

1

)

 | 

(

a

c

0

tx

b

d

0

ty

0

0

1

0

0

0

0

1

)

 |
| `[a b c d tx ty]` |

 値は次の関数を表します。
 `matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())`

例
-

### HTML


```html
<div>Normal</div>
<div class="changed">Changed</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.changed {
  transform: matrix(1, 2, -1, 1, 80, 80);
  background-color: pink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-matrix |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `transform`
* 独立した座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`
* `<transform-function>`
* `matrix3d()`
* Understanding the CSS Transforms Matrix
scale3d()
=========

**`scale3d()`** は CSS の関数で、 3D 空間において要素を変倍する座標変換を定義します。
 変倍量はベクトルで定義されるため、それぞれの次元ごとに異なる倍率で変倍することができます。結果は `<transform-function>` データ型になります。

試してみましょう
--------

この変倍座標変換は、三次元ののベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。3 つすべての座標が等しい場合、変倍は一様 (*等方的*) で、要素の形が保たれます (これは相似変換です)。

座標の値が [-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は 点対称化 と大きさの変更を行います。1 と等しい場合、変倍は何もしません。

構文
--

`scale3d()` 関数は 3 つの値で指定され、それぞれの値はそれぞれの方向に適用される変倍率を表します。


```css
scale3d(sx, sy, sz)
```

### 値

`sx`

`<number>` で、変倍ベクトルの横軸を表します。

`sy`

`<number>` で、変倍ベクトルの縦軸を表します。

`sz`

`<number>` で、変倍ベクトルの Z 成分を表します。



| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| この座標変換は 3D 空間に適用され、平面で表すことはできません。 | 

(

sx

0

0

0

sy

0

0

0

sz

)

 | 

(

sx

0

0

0

0

sy

0

0

0

0

sz

0

0

0

0

1

)

 |

例
-

### 原点の変更なし

#### HTML


```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```


#### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  background-color: pink;
}
```


#### 結果

### 座標変換の原点を移動

#### HTML


```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```


#### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  transform-origin: left;
  background-color: pink;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-scale3d |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `transform`
* `<transform-function>`
* `scaleZ()`
* `translate3d()`
* `rotate3d()`
* 独立した座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`
rotateX()
=========

**`rotateX()`** は CSS の関数で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる座標変換を定義します。結果は `<transform-function>` データ型になります。

試してみましょう
--------

回転軸は、CSS の `transform-origin` プロパティで定義される原点を通ります。

**メモ:** `rotateX(a)` は `rotate3d(1, 0, 0, a)` と等価です。

**メモ:** 2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。

構文
--

`rotateX()` で生成される回転の量は、 `<angle>` で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。


```css
rotateX(a)
```

### 値

`a`

`<angle>` で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。



| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| この変換は 3D 空間に適用され、平面で表すことはできません。 | 

(

1

0

0

0

cos
(
a
)

-
sin
(
a
)

0

sin
(
a
)

cos
(
a
)

)

 | 

(

1

0

0

0

0

cos
(
a
)

-
sin
(
a
)

0

0

sin
(
a
)

cos
(
a
)

0

0

0

0

1

)

 |

例
-

### HTML


```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateX(45deg);
  background-color: pink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-rotatex |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `transform` プロパティ
* `rotate` プロパティ
* `<transform-function>`
skewY()
=======

**`skewY()`** は CSS の関数で、要素を 2D 平面上で垂直方向にゆがめる変換を定義します。結果は `<transform-function>` データ型になります。

試してみましょう
--------

 この変換はシアー変形（せん断写像）で、要素内のそれぞれの点を垂直方向に指定された角度でゆがませます。
 それぞれの点の縦座標は、指定された角度と原点からの距離に比例した値によって変更されます。
 よって、原点から遠くなるにしたがって、加えられる値が大きくなります。

構文
--


```css
skewY(a)
```

### 値

`a`

`<angle>` で、縦座標方向にゆがめるのに使用する角度を表します。



| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| 

(

1

0

tan
(
a
)

1

)

 | 

(

1

0

0

tan
(
a
)

1

0

0

0

1

)

 | 

(

1

0

0

tan
(
a
)

1

0

0

0

1

)

 | 

(

1

0

0

0

tan
(
a
)

1

0

0

0

0

1

0

0

0

0

1

)

 |
| `[1 tan(a) 0 1 0 0]` |

例
-

### HTML


```html
<div>Normal</div>
<div class="skewed">Skewed</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skewY(40deg);
  background-color: pink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-skewy |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `transform`
* `<transform-function>`
* 独立した座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`
    + 注: `skew` プロパティはありません
scaleZ()
========

**`scaleZ()`** は CSS の関数で、要素を Z 軸に沿って変倍する座標変換を定義します。結果は `<transform-function>` データ型になります。

試してみましょう
--------

これは要素のそれぞれの点の Z 座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleZ(-1)` は軸の線対称を定義し、Z 軸は (`transform-origin` プロパティの指定通りに) 原点を通過します。

上記のデモでは、`perspective: 550px;` (三次元空間を作るため) と `transform-style: preserve-3d;` (立方体の 6 つの面である子を三次元空間に配置) を立方体に設定しました。

**メモ:** `scaleZ(sz)` は `scale3d(1, 1, sz)` と等価です。

構文
--


```css
scaleZ(s)
```

### 値

`s`

`<number>` で、要素のそれぞれの点の Z 座標に適用される変倍率を表します。



| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| この座標変換は 3D 空間に適用され、平面で表すことはできません。 | 

(

1

0

0

0

1

0

0

0

s

)

 | 

(

1

0

0

0

0

1

0

0

0

0

s

0

0

0

0

1

)

 |

例
-

### HTML


```html
<div>Normal</div>
<div class="perspective">Translated</div>
<div class="scaled-translated">Scaled</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.perspective {
  /\* 3D 空間を生成するために視点を含める \*/
  transform: perspective(400px) translateZ(-100px);
  background-color: limegreen;
}

.scaled-translated {
  /\* 3D 空間を生成するために視点を含める \*/
  transform: perspective(400px) scaleZ(2) translateZ(-100px);
  background-color: pink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-scalez |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `scaleX()`
* `scaleY()`
* `transform`
* `<transform-function>`
* `transform-origin`
* 独立した座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`
    + 注: `skew` プロパティはありません
translate()
===========

**`translate()`** は CSS の関数で、要素を水平方向や垂直方向で再配置します。結果は `<transform-function>` データ型になります。

試してみましょう
--------

この変換は、二次元ベクトルであることが特徴です。それぞれの方向にどれだけ要素が移動するかの座標を定義します。

構文
--


```css
/\* 単一の <length-percentage> 値 \*/
transform: translate(200px);
transform: translate(50%);

/\* 二つの <length-percentage> 値 \*/
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);
```

### 値

単一の `<length-percentage>` values

この値は `<length>` または `<percentage>` で、変換ベクトルの横軸 (水平方向、X 座標) を表します。変換ベクトルの縦軸 (垂直方向、Y 座標) は `0` に設定されます。例えば、 `translate(2px)` は `translate(2px, 0)` と等価です。パーセント値の場合は、 `transform-box` で定義される参照ボックスの幅からの相対値です。

二つの `<length-percentage>` 値

この値は 2 つの `<length>` または `<percentage>` 値で、変換ベクトルの横軸 (水平方向、X 座標) と縦軸 (垂直方向、Y 座標) を表します。1 つ目にパーセント値が使用された場合は、 `transform-box` で定義された参照ボックスの幅からの相対値で、2 つ目にパーセント値が使用された場合は、高さからの相対値です。



| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| ℝ^2 では線形変換ではないので、直交座標の行列で表すことはできません。 | 

(

1

0

tx

0

1

ty

0

0

1

)

 | 

(

1

0

tx

0

1

ty

0

0

1

)

 | 

(

1

0

0

tx

0

1

0

ty

0

0

1

0

0

0

0

1

)

 |
| `[1 0 0 1 tx ty]` |

### 形式文法


```css
translate(<length-percentage>, <length-percentage>?)
```

例
-

### 単一軸を使用した移動

#### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /\* translateX(10px) または translate(10px, 0) と同じ \*/
  transform: translate(10px);
  background-color: pink;
}
```


#### 結果

### Y 軸と X 軸の移動の組み合わせ

#### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translate |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `transform`
* `<transform-function>`
* `translate`
scale()
=======

**`scale()`** は CSS の関数で、二次元平面上における拡縮する座標変換を定義します。変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は `<transform-function>` データ型になります。

試してみましょう
--------

この変倍座標変換は、二次元のベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。両方の座標が等しい場合、変倍は一様 (*等方的*) で、要素の形が保たれます (これは相似変換です)。

座標の値が [-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は 点対称化 と大きさの変更を行います。1 と等しい場合、変倍は何もしません。

**メモ:** `scale()` 関数は、 2D の変換のみに適用されます。 3D 空間内での変倍を行うには、 `scale3d()` 関数を使用してください。

構文
--

`scale()` 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。


```css
scale(sx)

scale(sx, sy)
```

### 値

`sx`

変倍ベクトルの横座標を表す `<number>`。

`sy`

変倍ベクトルの縦座標を表す `<number>`。定義されない場合、これの既定値は `sx` であり、要素の形を保つ一様な変倍となります。



| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| 

(

sx

0

0

sy

)

 | 

(

sx

0

0

0

sy

0

0

0

1

)

 | 

(

sx

0

0

0

sy

0

0

0

1

)

 | 

(

sx

0

0

0

0

sy

0

0

0

0

1

0

0

0

0

1

)

 |
| `[sx 0 0 sy 0 0]` |

アクセシビリティの考慮
-----------

拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。

また、 `prefers-reduced-motion` メディア特性を使用することを検討してください。これを使用してメディアクエリーを書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。

詳しくは以下の文書を参照してください。

* MDN WCAG の理解、ガイドライン 2.3 の解説
* Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1
例
-

### X と Y の大きさを一緒に変倍する

#### HTML


```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```


#### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /\* Equal to scaleX(0.7) scaleY(0.7) \*/
  background-color: pink;
}
```


#### 結果

### X と Y の大きさを別々に変倍し、原点を平行移動させる

#### HTML


```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```


#### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(2, 0.5); /\* Equal to scaleX(2) scaleY(0.5) \*/
  transform-origin: left;
  background-color: pink;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-scale |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `transform`
* `scale`
* `<transform-function>`
* `scale3d()`
* 他の独立座標変換関数、 `translate` および `rotate`
translateY()
============

**`translateY()`** は CSS の関数で、要素を二次元平面上の垂直方向で再配置します。結果は `<transform-function>` データ型になります。

試してみましょう
--------

**メモ:** `translateY(ty)` は `translate(0, ty)` または `translate3d(0, ty, 0)` と等価です。

構文
--


```css
/\* <length-percentage> 値 \*/
transform: translateY(200px);
transform: translateY(50%);
```

### 値

`<length-percentage>`

変換ベクトルの縦座標を表す `<length>` または `<percentage>` です。直交座標系では Y 座標の移動量をを表します。パーセント値は `transform-box` プロパティで定義される参照ボックスの幅からの相対値です。



| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| 平行移動は ℝ^2 の線形変換ではないので、直交座標行列を使用して表すことはできません。 | 

(

1

0

0

0

1

t

0

0

1

)

 | 

(

1

0

0

0

1

t

0

0

1

)

 | 

(

1

0

0

0

0

1

0

t

0

0

1

0

0

0

0

1

)

 |
| `[1 0 0 1 0 t]` |

### 形式文法


```css
translateY(<length-percentage>)
```

例
-

### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```

### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateY(10px);
  background-color: pink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translatey |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `transform`
* `<transform-function>`
* `translate`
rotateZ()
=========

**`rotateZ()`** は CSS の関数で、要素の形を変化させずに Z 軸の周りを回転させる座標変換を定義します。結果は `<transform-function>` データ型になります。

試してみましょう
--------

回転軸は、 `transform-origin` CSS プロパティで定義される原点を通ります。

**メモ:** `rotateZ(a)` は `rotate(a)` または `rotate3d(0, 0, 1, a)` と等価です。

**メモ:** 2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。

構文
--

`rotateZ()` で生成される回転の量は、 `<angle>` で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。


```css
rotateZ(a)
```

### 値

`a`

`<angle>` で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。



| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| この変換は 3D 空間に適用され、平面で表すことはできません。 | 

(

cos
(
a
)

-
sin
(
a
)

0

sin
(
a
)

cos
(
a
)

0

0

0

1

)

 | 

(

cos
(
a
)

-
sin
(
a
)

0

0

sin
(
a
)

cos
(
a
)

0

0

0

0

1

0

0

0

0

1

)

 |

例
-

### HTML


```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateZ(45deg);
  background-color: pink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-rotatez |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `transform` プロパティ
* `rotate` プロパティ
* `<transform-function>`
scaleX()
========

**`scaleX()`** は CSS の関数で、要素を X 軸に沿って (水平に) 変倍する座標変換を定義します。結果は `<transform-function>` データ型になります。

試してみましょう
--------

これは要素のそれぞれの点の横座標（水平座標、 X 座標）を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleX(-1)` は軸の線対称を定義し、垂直軸は (`transform-origin` プロパティの指定通りに) 原点を通過します。

**メモ:** `scaleX(sx)` は `scale(sx, 1)` または `scale3d(sx, 1, 1)` と等価です。

構文
--


```css
scaleX(s)
```

### 値

`s`

`<number>` で、要素のそれぞれの点の横座標に適用される変倍率を表します。



| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| 

(

s

0

0

1

)

 | 

(

s

0

0

0

1

0

0

0

1

)

 | 

(

s

0

0

0

1

0

0

0

1

)

 | 

(

s

0

0

0

0

1

0

0

0

0

1

0

0

0

0

1

)

 |
| `[s 0 0 1 0 0]` |

例
-

### HTML


```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleX(0.6);
  background-color: pink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-scalex |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `scaleY()`
* `scaleZ()`
* `transform`
* `scale`
* `<transform-function>`
* `transform-origin`
* 他の独立した座標変換プロパティ:
    + `translate`
    + `rotate`
    + 注: `skew` プロパティはありません