blob: 38937f183f15a7f788de5577db9943ea563b8d65 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
---
title: scale3d()
slug: Web/CSS/transform-function/scale3d
tags:
- CSS
- CSS 関数
- CSS 座標変換
- 関数
- リファレンス
translation_of: Web/CSS/transform-function/scale3d()
original_slug: Web/CSS/transform-function/scale3d()
browser-compat: css.types.transform-function.scale3d
---
{{CSSRef}}
**`scale3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、三次元空間において要素を変倍する変形を定義します。
変倍量はベクトルで定義されるため、それぞれの次元ごとに異なる倍率で変倍することができます。結果は {{cssxref("<transform-function>")}} データ型になります。
{{EmbedInteractiveExample("pages/css/function-scale3d.html")}}
この変倍変形は、三次元ののベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。3 つすべての座標が等しい場合、変倍は一様 (_等方的_) で、要素の形が保たれます (これは[相似変換](https://ja.wikipedia.org/wiki/%E8%A1%8C%E5%88%97%E3%81%AE%E7%9B%B8%E4%BC%BC)です)。
座標の値が \[-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は [点対称化](https://ja.wikipedia.org/wiki/点対称) と大きさの変更を行います。1 と等しい場合、変倍は何もしません。
## 構文
`scale3d()` 関数は 3 つの値で指定され、それぞれの値はそれぞれの方向に適用される変倍率を表します。
```css
scale3d(sx, sy, sz)
```
### 値
- `sx`
- : {{cssxref("<number>")}} で、変倍ベクトルの横軸を表します。
- `sy`
- : {{cssxref("<number>")}} で、変倍ベクトルの縦軸を表します。
- `sz`
- : {{cssxref("<number>")}} で、変倍ベクトルの Z 成分を表します。
<table class="standard-table">
<thead>
<tr>
<th scope="col">ℝ^2 上のデカルト座標</th>
<th scope="col">ℝℙ^2 上の同次座標</th>
<th scope="col">ℝ^3 上のデカルト座標</th>
<th scope="col">ℝℙ^3 上の同次座標</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
この変形は三次元空間に適用され、平面で表すことはできません。
</td>
<td>
<math
><mfenced
><mtable
><mtr
><mtd><mi>sx</mi> </mtd><mtd><mn>0</mn> </mtd
><mtd><mn>0</mn> </mtd></mtr
><mtr
><mtd><mn>0</mn> </mtd><mtd><mi>sy</mi> </mtd
><mtd><mn>0</mn> </mtd></mtr
><mtr
><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd
><mtd><mi>sz</mi></mtd></mtr
></mtable
></mfenced
></math
>
</td>
<td>
<math
><mfenced
><mtable
><mtr
><mtd><mi>sx</mi> </mtd><mtd><mn>0</mn> </mtd
><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr
><mtr
><mtd><mn>0</mn> </mtd><mtd><mi>sy</mi> </mtd
><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr
><mtr
><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd
><mtd><mi>sz</mi> </mtd><mtd><mn>0</mn> </mtd></mtr
><mtr
><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd
><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></mtd></mtr
></mtable
></mfenced
></math
>
</td>
</tr>
</tbody>
</table>
## 例
<h3 id="Without_changing_the_origin">原点の変更なし</h3>
#### 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;
}
```
#### 結果
{{EmbedLiveSample("Without_changing_the_origin","200","200")}}
<h3 id="Translating_the_origin_of_the_transformation">変形の原点を移動</h3>
#### 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;
}
```
#### 結果
{{EmbedLiveSample("Translating_the_origin_of_the_transformation","200","200")}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{cssxref("transform")}}
- {{cssxref("<transform-function>")}}
- [`scaleZ()`](/ja/docs/Web/CSS/transform-function/scaleZ())
- [`translate3d()`](/ja/docs/Web/CSS/transform-function/translate3d())
- [`rotate3d()`](/ja/docs/Web/CSS/transform-function/rotate3d())
|
