このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
scale()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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> <img src="/shared-assets/images/examples/firefox-logo.svg" width="200" /></section>この変倍座標変換は、二次元のベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。両方の座標が等しい場合、変倍は一様 (等方的) で、要素の形が保たれます (これは相似変換です)。
座標の値が [-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は点対称化 と大きさの変更を行います。1 と等しい場合、変倍は何もしません。
メモ:scale() 関数は、 2D の変換のみに適用されます。 3D 空間内での変倍を行うには、scale3d() 関数を使用してください。
構文
scale(sx)scale(sx, sy)値
sx変倍ベクトルの横軸（水平、X 成分）を表す
<number>または<percentage>です。sy省略可変倍ベクトルの縦軸（垂直、Y 成分）を表す
<number>または<percentage>です。定義されていない場合、デフォルト値はsxであり、要素のアスペクト比を保つ一様な変倍となります。
形式文法
<scale()> =
scale(<number> ,<number>?)
アクセシビリティ
拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。
また、prefers-reduced-motion メディア特性を使用することを検討してください。これを使用してメディアクエリーを書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。
詳しくは以下の文書を参照してください。
例
X と Y の大きさを一緒に変倍する
HTML
<div>通常</div><div>変倍</div>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
<div>通常</div><div>変倍</div>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;}結果
仕様書
| Specification |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-scale |