scale

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2022.

scaleCSS のプロパティで、 transform とは個別に独立しての変倍変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 transform の値で座標変換関数を指定する実際の順序を思い出す手間を軽減します。

試してみましょう

構文

css
/* キーワード値 */
scale: none;

/* 1 つの値 */
/* 1 または 100% より大きい値で要素を拡大 */
scale: 2;
/* 1 または 100% より小さい値で要素を縮小 */
scale: 50%;

/* 2 つの値 */
scale: 2 0.5;

/* 3 つの値 */
scale: 200% 50% 200%;

/* グローバル値 */
scale: inherit;
scale: initial;
scale: revert;
scale: revert-layer;
scale: unset;

試してみましょう

1 つの数値

該当する要素の変倍率を指定する <number> または <percentage> であり、 X および Y 軸で同じの変倍になります。 scale() (2D の変倍)関数に 1 つの値を指定した場合と等価です。

2 つの長さ/パーセント値

2 つの <number> または <percentage> 値で、2D の変倍における X 軸と Y 軸の変倍率を(それぞれ)指定します。 scale() (2D の変倍)関数に 2 つの値を指定した場合と等価です。

3 つの長さ/パーセント値

3 つの <number> または <percentage> 値で、3D の変倍における X 軸と Y 軸と Z 軸の変倍率を(それぞれ)指定します。 scale3d() (3D の変倍)関数と等価です。

none

変倍が適用されないことを示します。

公式定義

初期値none
適用対象座標変換可能要素
継承なし
計算値指定通り
アニメーションの種類座標変換
重ね合わせコンテキストの生成あり

形式文法

ホバー時の要素の変倍

次の例は、ホバー時に要素を変倍する方法を示しています。 2 つのボックスが表示されており、 1 つは 1 つの scale 値を持ち、両軸に沿って要素を変倍します。 2 つ目のボックスには2つの scale 値が示されており、 X 軸と Y 軸のそれぞれに沿って要素を変倍します。

HTML

html
<div class="box" id="box1">single value</div>
<div class="box" id="box2">two values</div>

CSS

css
.box {
  float: left;
  margin: 1em;
  width: 7em;
  line-height: 7em;
  text-align: center;
  transition: 0.5s ease-in-out;
  border: 3px dotted;
}

#box1:hover {
  scale: 1.25;
}

#box2:hover {
  scale: 1.25 0.75;
}

結果

仕様書

Specification
CSS Transforms Module Level 2
# individual-transforms

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scale
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報

メモ: skew には独立した transform の値はありません