--- title: scaleY() slug: Web/CSS/transform-function/scaleY() tags: - CSS - CSS 関数 - CSS 座標変換 - 関数 - リファレンス browser-compat: css.types.transform-function.scaleY translation_of: Web/CSS/transform-function/scaleY() --- {{CSSRef}} **`scaleY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を Y 軸に沿って (垂直に) 変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 ![](scaley.png) これは要素のそれぞれの点の横座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleY(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、水平軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 > **Note:** `scaleY(sy)` は `scale(1, sy)` または `scale3d(1, sy, 1)` と等価です。 > > `transform: rotateX(180deg);` === `transform: scaleY(-1);` ## 構文 ```css scaleY(s) ``` ### 値 - `s` - : {{cssxref("<number>")}} で、要素のそれぞれの点の縦座標に適用する変倍係数を表します。

ℝ^2 上のデカルト座標	ℝℙ^2 上の同次座標	ℝ^3 上のデカルト座標	ℝℙ^3 上の同次座標
$(\begin{matrix} 1 & 0 \\ 0 & s \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 \\ 0 & s & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 \\ 0 & s & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & s & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} 1 & 0 \\ 0 & s \end{matrix})$	`[1 0 0 s 0 0]`

例

### HTML ```html

Normal

Scaled

``` ### CSS ```css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scaleY(0.6); background-color: pink; } ``` ### 結果 {{EmbedLiveSample("Examples", 200, 200)}} ## 仕様書 {{Specifications}} ## ブラウザーの互換性 {{Compat}} ## 関連情報 - [`scaleX()`]() - [`scaleZ()`]() - {{cssxref("transform")}} - {{cssxref("<transform-function>")}} - {{cssxref("transform-origin")}}