We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

この変形は、二次元ベクトルによって特徴づけられます。座標でどれほどの変倍が各方向において行われるのかを定義します。両方の座標が等しい場合、変倍は一様 (つまり等方的) で、要素の形が保たれます (変倍関数は 相似変換 を定義します)。

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

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

構文

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

scale(sx)

scale(sx, sy)

sx
変倍ベクトルの横座標を表す <number>
sy
変倍ベクトルの縦座標を表す <number>。定義されない場合、これのデフォルト値は sx であり、要素の形を保つ一様な変倍となります。
2 上のデカルト座標 ℝℙ2 上の同次座標 3 上のデカルト座標 ℝℙ3 上の同次座標
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]

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

HTML

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

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;
}

Result

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

HTML

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

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;
}

Result

ブラウザー互換性

互換性の情報は <transform-function> データ型をご覧ください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: dskmori, piyo-ko
最終更新者: dskmori,