scale()

scale() というCSS 関数は、要素の大きさを変えます。これは、大きさを拡大または縮小することができます。また、変倍の量がベクトルで定義されるため、一つの方向において、他の方向における拡大・縮小よりも、もっと拡大・縮小を行うことができます。

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

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

scale() 関数は、(2次元の) ユークリッド平面内の変換にのみ適用されます。空間内での変倍を行うには、scale3D() 関数を使わねばなりません。

構文

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

<p>foo</p>
<p class="transformed">bar</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  /* 右の変換と同じ: scaleX(2) scaleY(2);*/
  transform: scale(2);
  background-color: blue;
}

Result

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

HTML

<p>foo</p>
<p class="transformed">bar</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  /* scaleX(2) scaleY(0.5) と同じ */
  transform: scale(2, 0.5);
  transform-origin: left;
  background-color: blue;
}

Result

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

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