CSS `scale()` 関数

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

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

試してみましょう

transform: scale(1);

transform: scale(0.7);

transform: scale(1.3, 0.4);

transform: scale(-0.5, 1);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

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

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

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

構文

css

scale(sx)

scale(sx, sy)

値

sx: 変倍ベクトルの横軸（水平、X 成分）を表す <number> または <percentage> です。
sy 省略可: 変倍ベクトルの縦軸（垂直、Y 成分）を表す <number> または <percentage> です。定義されていない場合、デフォルト値は sx であり、要素のアスペクト比を保つ一様な変倍となります。

直交座標系 (ℝ^2)	同次座標系 (ℝℙ^2)	直交座標系 (ℝ^3)	同次座標系 (ℝℙ^3)
$\left( \begin{array}{cc} sx & 0 \\ 0 & sy \end{array} \right)$	$\left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{cccc} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$
	`[sx 0 0 sy 0 0]`

形式文法

<scale()> = 
  scale( <number> , <number>? )

アクセシビリティ

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

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

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

例

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

HTML

html

<div>通常</div>
<div class="scaled">変倍</div>

CSS

css

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

.scaled {
  transform: scale(0.7); /* scaleX(0.7) scaleY(0.7) と等価 */
  background-color: pink;
}

結果

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

HTML

html

<div>通常</div>
<div class="scaled">変倍</div>

CSS

css

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

.scaled {
  transform: scale(2, 0.5); /* scaleX(2) scaleY(0.5) と等価 */
  transform-origin: left;
  background-color: pink;
}